<!-- Charts plugins -->
<script type="text/javascript" src="<?php echo $this->config->item("plugin_path"); ?>charts/flot/jquery.flot.js"></script>
<script type="text/javascript" src="<?php echo $this->config->item("plugin_path"); ?>charts/flot/jquery.flot.pie.js"></script>
<script type="text/javascript" src="<?php echo $this->config->item("plugin_path"); ?>charts/flot/jquery.flot.tooltip_0.4.4.js"></script>
<script type="text/javascript" src="<?php echo $this->config->item("plugin_path"); ?>charts/flot/jquery.flot.orderBars.js"></script>
<script type="text/javascript" src="<?php echo $this->config->item("plugin_path"); ?>charts/sparkline/jquery.sparkline.min.js"></script><!-- Sparkline plugin -->
<!-- Misc plugins -->
<script type="text/javascript" src="<?php echo $this->config->item("plugin_path"); ?>misc/qtip/jquery.qtip.min.js"></script><!-- Custom tooltip plugin -->
<script type="text/javascript" src="<?php echo $this->config->item("plugin_path"); ?>misc/totop/jquery.ui.totop.min.js"></script>
<div class="row">
	<div class="col-lg-1">
	</div>

    <div class="col-lg-10">
        <div class="page-header">
            <h4>Report Per DInas</h4>
        </div>
        <div>
            <ul id="myTab" class="nav nav-tabs pattern">
<!-- 	            <?php $a=0; foreach ($list_izin as $row) { ?>
	            	<li><a href="#tab"<?php $a+1?> data-toggle="tab"><?php echo $row["NAMA_IJIN"] ?></a></li>
	            <?php } ?> -->
                <li><a href="#tab1" data-toggle="tab">SKRK</a></li>
                <li><a href="#tab2" data-toggle="tab">IMB</a></li>
                <li><a href="#tab3" data-toggle="tab">HO</a></li>
                <li><a href="#tab4" data-toggle="tab">TDUP</a></li>
                <li><a href="#tab5" data-toggle="tab">SSW (Paket)</a></li>
                <li><a href="#tab6" data-toggle="tab">SUP</a></li>
                <li><a href="#tab7" data-toggle="tab">IPT</a></li>
                <li><a href="#tab8" data-toggle="tab">Lain-Lain</a></li>
            </ul>

            <div class="tab-content">
                <div class="tab-pane fade" id="tab1" style="margin-bottom: 700px;">
					<div class="col-lg-12">
						<div class="panel panel-default">
							<div class="panel-heading">
								<h4>
									<span class="icon16 icomoon-icon-bars"></span>
									<span>Report Global Kepuasan Pelanggan</span>
								</h4>
								<a href="#" class="minimize">Minimize</a>
							</div>
							<div class="panel-body">
								<div class="simple-pie-1-1" style="height:300px;width:750px;"></div>
							</div>
						</div>
					</div>

					<div class="col-lg-12">
						<div class="panel panel-default chart">
							<div class="panel-heading">
								<h4>
									<span class="icon16 icomoon-icon-bars"></span>
									<span>Nilai Rata - Rata Per Pertanyaan</span>
								</h4>
								<a href="#" class="minimize">Minimize</a>
							</div>
							<div class="panel-body">
							   <div class="order-bars-chart-1" style="height:275px;width:730px;">
								</div>
							</div>
						</div>
					</div>

					<div class="col-lg-4">
						<div class="panel panel-default">
							<div class="panel-heading">
								<h4>
									<span class="icon16 icomoon-icon-bars"></span>
									<span>Berdasarkan Jenis Kelamin</span>
								</h4>
								<a href="#" class="minimize">Minimize</a>
							</div>
							<div class="panel-body">
								<div class="simple-pie-1-2" style="height:230px;width:200px;"></div>
							</div>
						</div>
					</div>

					<div class="col-lg-4">
						<div class="panel panel-default">
							<div class="panel-heading">
								<h4>
									<span class="icon16 icomoon-icon-bars"></span>
									<span>Berdasarkan Usia</span>
								</h4>
								<a href="#" class="minimize">Minimize</a>
							</div>
							<div class="panel-body">
								<div class="simple-pie-1-3" style="height:230px;width:200px;"></div>
							</div>
						</div>
					</div>

					<div class="col-lg-4">
						<div class="panel panel-default">
							<div class="panel-heading">
								<h4>
									<span class="icon16 icomoon-icon-bars"></span>
									<span>Berdasarkan Perkerjaan</span>
								</h4>
								<a href="#" class="minimize">Minimize</a>
							</div>
							<div class="panel-body">
								<div class="simple-pie-1-4" style="height:230px;width:200px;"></div>
							</div>
						</div>
					</div>

					<div class="col-lg-4">
						<div class="panel panel-default">
							<div class="panel-heading">
								<h4>
									<span class="icon16 icomoon-icon-bars"></span>
									<span>Berdasarkan Pendidikan</span>
								</h4>
								<a href="#" class="minimize">Minimize</a>
							</div>
							<div class="panel-body">
								<div class="simple-pie-1-5" style="height:230px;width:200px;"></div>
							</div>
						</div>
					</div>

					<div class="col-lg-6">
						<div class="panel panel-default">
							<div class="panel-heading">
								<h4>
									<span class="icon16 icomoon-icon-bars"></span>
									<span>Berdasarkan Frekuensi Pengurusan Izin</span>
								</h4>
								<a href="#" class="minimize">Minimize</a>
							</div>
							<div class="panel-body">
								<div class="simple-pie-1-6" style="height:230px;width:400px;"></div>
							</div>
						</div>
					</div>
                </div>

                <div class="tab-pane fade" id="tab2" style="margin-bottom: 700px;">
					<div class="col-lg-12">
						<div class="panel panel-default">
							<div class="panel-heading">
								<h4>
									<span class="icon16 icomoon-icon-bars"></span>
									<span>Report Global Kepuasan Pelanggan</span>
								</h4>
								<a href="#" class="minimize">Minimize</a>
							</div>
							<div class="panel-body">
								<div class="simple-pie-2-1" style="height:300px;width:750px;"></div>
							</div>
						</div>
					</div>

					<div class="col-lg-12">
						<div class="panel panel-default chart">
							<div class="panel-heading">
								<h4>
									<span class="icon16 icomoon-icon-bars"></span>
									<span>Nilai Rata - Rata Per Pertanyaan</span>
								</h4>
								<a href="#" class="minimize">Minimize</a>
							</div>
							<div class="panel-body">
							   <div class="order-bars-chart-2" style="height:275px;width:730px;">
								</div>
							</div>
						</div>
					</div>

					<div class="col-lg-4">
						<div class="panel panel-default">
							<div class="panel-heading">
								<h4>
									<span class="icon16 icomoon-icon-bars"></span>
									<span>Berdasarkan Jenis Kelamin</span>
								</h4>
								<a href="#" class="minimize">Minimize</a>
							</div>
							<div class="panel-body">
								<div class="simple-pie-2-2" style="height:230px;width:200px;"></div>
							</div>
						</div>
					</div>

					<div class="col-lg-4">
						<div class="panel panel-default">
							<div class="panel-heading">
								<h4>
									<span class="icon16 icomoon-icon-bars"></span>
									<span>Berdasarkan Usia</span>
								</h4>
								<a href="#" class="minimize">Minimize</a>
							</div>
							<div class="panel-body">
								<div class="simple-pie-2-3" style="height:230px;width:200px;"></div>
							</div>
						</div>
					</div>

					<div class="col-lg-4">
						<div class="panel panel-default">
							<div class="panel-heading">
								<h4>
									<span class="icon16 icomoon-icon-bars"></span>
									<span>Berdasarkan Perkerjaan</span>
								</h4>
								<a href="#" class="minimize">Minimize</a>
							</div>
							<div class="panel-body">
								<div class="simple-pie-2-4" style="height:230px;width:200px;"></div>
							</div>
						</div>
					</div>

					<div class="col-lg-4">
						<div class="panel panel-default">
							<div class="panel-heading">
								<h4>
									<span class="icon16 icomoon-icon-bars"></span>
									<span>Berdasarkan Pendidikan</span>
								</h4>
								<a href="#" class="minimize">Minimize</a>
							</div>
							<div class="panel-body">
								<div class="simple-pie-2-5" style="height:230px;width:200px;"></div>
							</div>
						</div>
					</div>

					<div class="col-lg-6">
						<div class="panel panel-default">
							<div class="panel-heading">
								<h4>
									<span class="icon16 icomoon-icon-bars"></span>
									<span>Berdasarkan Frekuensi Pengurusan Izin</span>
								</h4>
								<a href="#" class="minimize">Minimize</a>
							</div>
							<div class="panel-body">
								<div class="simple-pie-2-6" style="height:230px;width:400px;"></div>
							</div>
						</div>
					</div>
                </div>

                <div class="tab-pane fade" id="tab3" style="margin-bottom: 700px;">
					<div class="col-lg-12">
						<div class="panel panel-default">
							<div class="panel-heading">
								<h4>
									<span class="icon16 icomoon-icon-bars"></span>
									<span>Report Global Kepuasan Pelanggan</span>
								</h4>
								<a href="#" class="minimize">Minimize</a>
							</div>
							<div class="panel-body">
								<div class="simple-pie-3-1" style="height:300px;width:750px;"></div>
							</div>
						</div>
					</div>

					<div class="col-lg-12">
						<div class="panel panel-default chart">
							<div class="panel-heading">
								<h4>
									<span class="icon16 icomoon-icon-bars"></span>
									<span>Nilai Rata - Rata Per Pertanyaan</span>
								</h4>
								<a href="#" class="minimize">Minimize</a>
							</div>
							<div class="panel-body">
							   <div class="order-bars-chart-3" style="height:275px;width:730px;">
								</div>
							</div>
						</div>
					</div>

					<div class="col-lg-4">
						<div class="panel panel-default">
							<div class="panel-heading">
								<h4>
									<span class="icon16 icomoon-icon-bars"></span>
									<span>Berdasarkan Jenis Kelamin</span>
								</h4>
								<a href="#" class="minimize">Minimize</a>
							</div>
							<div class="panel-body">
								<div class="simple-pie-3-2" style="height:230px;width:200px;"></div>
							</div>
						</div>
					</div>

					<div class="col-lg-4">
						<div class="panel panel-default">
							<div class="panel-heading">
								<h4>
									<span class="icon16 icomoon-icon-bars"></span>
									<span>Berdasarkan Usia</span>
								</h4>
								<a href="#" class="minimize">Minimize</a>
							</div>
							<div class="panel-body">
								<div class="simple-pie-3-3" style="height:230px;width:200px;"></div>
							</div>
						</div>
					</div>

					<div class="col-lg-4">
						<div class="panel panel-default">
							<div class="panel-heading">
								<h4>
									<span class="icon16 icomoon-icon-bars"></span>
									<span>Berdasarkan Perkerjaan</span>
								</h4>
								<a href="#" class="minimize">Minimize</a>
							</div>
							<div class="panel-body">
								<div class="simple-pie-3-4" style="height:230px;width:200px;"></div>
							</div>
						</div>
					</div>

					<div class="col-lg-4">
						<div class="panel panel-default">
							<div class="panel-heading">
								<h4>
									<span class="icon16 icomoon-icon-bars"></span>
									<span>Berdasarkan Pendidikan</span>
								</h4>
								<a href="#" class="minimize">Minimize</a>
							</div>
							<div class="panel-body">
								<div class="simple-pie-3-5" style="height:230px;width:200px;"></div>
							</div>
						</div>
					</div>

					<div class="col-lg-6">
						<div class="panel panel-default">
							<div class="panel-heading">
								<h4>
									<span class="icon16 icomoon-icon-bars"></span>
									<span>Berdasarkan Frekuensi Pengurusan Izin</span>
								</h4>
								<a href="#" class="minimize">Minimize</a>
							</div>
							<div class="panel-body">
								<div class="simple-pie-3-6" style="height:230px;width:400px;"></div>
							</div>
						</div>
					</div>
                </div>

                <div class="tab-pane fade" id="tab4" style="margin-bottom: 700px;">
					<div class="col-lg-12">
						<div class="panel panel-default">
							<div class="panel-heading">
								<h4>
									<span class="icon16 icomoon-icon-bars"></span>
									<span>Report Global Kepuasan Pelanggan</span>
								</h4>
								<a href="#" class="minimize">Minimize</a>
							</div>
							<div class="panel-body">
								<div class="simple-pie-4-1" style="height:300px;width:750px;"></div>
							</div>
						</div>
					</div>

					<div class="col-lg-12">
						<div class="panel panel-default chart">
							<div class="panel-heading">
								<h4>
									<span class="icon16 icomoon-icon-bars"></span>
									<span>Nilai Rata - Rata Per Pertanyaan</span>
								</h4>
								<a href="#" class="minimize">Minimize</a>
							</div>
							<div class="panel-body">
							   <div class="order-bars-chart-4" style="height:275px;width:730px;">
								</div>
							</div>
						</div>
					</div>

					<div class="col-lg-4">
						<div class="panel panel-default">
							<div class="panel-heading">
								<h4>
									<span class="icon16 icomoon-icon-bars"></span>
									<span>Berdasarkan Jenis Kelamin</span>
								</h4>
								<a href="#" class="minimize">Minimize</a>
							</div>
							<div class="panel-body">
								<div class="simple-pie-4-2" style="height:230px;width:200px;"></div>
							</div>
						</div>
					</div>

					<div class="col-lg-4">
						<div class="panel panel-default">
							<div class="panel-heading">
								<h4>
									<span class="icon16 icomoon-icon-bars"></span>
									<span>Berdasarkan Usia</span>
								</h4>
								<a href="#" class="minimize">Minimize</a>
							</div>
							<div class="panel-body">
								<div class="simple-pie-4-3" style="height:230px;width:200px;"></div>
							</div>
						</div>
					</div>

					<div class="col-lg-4">
						<div class="panel panel-default">
							<div class="panel-heading">
								<h4>
									<span class="icon16 icomoon-icon-bars"></span>
									<span>Berdasarkan Perkerjaan</span>
								</h4>
								<a href="#" class="minimize">Minimize</a>
							</div>
							<div class="panel-body">
								<div class="simple-pie-4-4" style="height:230px;width:200px;"></div>
							</div>
						</div>
					</div>

					<div class="col-lg-4">
						<div class="panel panel-default">
							<div class="panel-heading">
								<h4>
									<span class="icon16 icomoon-icon-bars"></span>
									<span>Berdasarkan Pendidikan</span>
								</h4>
								<a href="#" class="minimize">Minimize</a>
							</div>
							<div class="panel-body">
								<div class="simple-pie-4-5" style="height:230px;width:200px;"></div>
							</div>
						</div>
					</div>

					<div class="col-lg-6">
						<div class="panel panel-default">
							<div class="panel-heading">
								<h4>
									<span class="icon16 icomoon-icon-bars"></span>
									<span>Berdasarkan Frekuensi Pengurusan Izin</span>
								</h4>
								<a href="#" class="minimize">Minimize</a>
							</div>
							<div class="panel-body">
								<div class="simple-pie-4-6" style="height:230px;width:400px;"></div>
							</div>
						</div>
					</div>
                </div>

                <div class="tab-pane fade" id="tab5" style="margin-bottom: 700px;">
					<div class="col-lg-12">
						<div class="panel panel-default">
							<div class="panel-heading">
								<h4>
									<span class="icon16 icomoon-icon-bars"></span>
									<span>Report Global Kepuasan Pelanggan</span>
								</h4>
								<a href="#" class="minimize">Minimize</a>
							</div>
							<div class="panel-body">
								<div class="simple-pie-5-1" style="height:300px;width:750px;"></div>
							</div>
						</div>
					</div>

					<div class="col-lg-12">
						<div class="panel panel-default chart">
							<div class="panel-heading">
								<h4>
									<span class="icon16 icomoon-icon-bars"></span>
									<span>Nilai Rata - Rata Per Pertanyaan</span>
								</h4>
								<a href="#" class="minimize">Minimize</a>
							</div>
							<div class="panel-body">
							   <div class="order-bars-chart-5" style="height:275px;width:730px;">
								</div>
							</div>
						</div>
					</div>

					<div class="col-lg-4">
						<div class="panel panel-default">
							<div class="panel-heading">
								<h4>
									<span class="icon16 icomoon-icon-bars"></span>
									<span>Berdasarkan Jenis Kelamin</span>
								</h4>
								<a href="#" class="minimize">Minimize</a>
							</div>
							<div class="panel-body">
								<div class="simple-pie-5-2" style="height:230px;width:200px;"></div>
							</div>
						</div>
					</div>

					<div class="col-lg-4">
						<div class="panel panel-default">
							<div class="panel-heading">
								<h4>
									<span class="icon16 icomoon-icon-bars"></span>
									<span>Berdasarkan Usia</span>
								</h4>
								<a href="#" class="minimize">Minimize</a>
							</div>
							<div class="panel-body">
								<div class="simple-pie-5-3" style="height:230px;width:200px;"></div>
							</div>
						</div>
					</div>

					<div class="col-lg-4">
						<div class="panel panel-default">
							<div class="panel-heading">
								<h4>
									<span class="icon16 icomoon-icon-bars"></span>
									<span>Berdasarkan Perkerjaan</span>
								</h4>
								<a href="#" class="minimize">Minimize</a>
							</div>
							<div class="panel-body">
								<div class="simple-pie-5-4" style="height:230px;width:200px;"></div>
							</div>
						</div>
					</div>

					<div class="col-lg-4">
						<div class="panel panel-default">
							<div class="panel-heading">
								<h4>
									<span class="icon16 icomoon-icon-bars"></span>
									<span>Berdasarkan Pendidikan</span>
								</h4>
								<a href="#" class="minimize">Minimize</a>
							</div>
							<div class="panel-body">
								<div class="simple-pie-5-5" style="height:230px;width:200px;"></div>
							</div>
						</div>
					</div>

					<div class="col-lg-6">
						<div class="panel panel-default">
							<div class="panel-heading">
								<h4>
									<span class="icon16 icomoon-icon-bars"></span>
									<span>Berdasarkan Frekuensi Pengurusan Izin</span>
								</h4>
								<a href="#" class="minimize">Minimize</a>
							</div>
							<div class="panel-body">
								<div class="simple-pie-5-6" style="height:230px;width:400px;"></div>
							</div>
						</div>
					</div>
                </div>

                <div class="tab-pane fade" id="tab6" style="margin-bottom: 700px;">
					<div class="col-lg-12">
						<div class="panel panel-default">
							<div class="panel-heading">
								<h4>
									<span class="icon16 icomoon-icon-bars"></span>
									<span>Report Global Kepuasan Pelanggan</span>
								</h4>
								<a href="#" class="minimize">Minimize</a>
							</div>
							<div class="panel-body">
								<div class="simple-pie-6-1" style="height:300px;width:750px;"></div>
							</div>
						</div>
					</div>

					<div class="col-lg-12">
						<div class="panel panel-default chart">
							<div class="panel-heading">
								<h4>
									<span class="icon16 icomoon-icon-bars"></span>
									<span>Nilai Rata - Rata Per Pertanyaan</span>
								</h4>
								<a href="#" class="minimize">Minimize</a>
							</div>
							<div class="panel-body">
							   <div class="order-bars-chart-6" style="height:275px;width:730px;">
								</div>
							</div>
						</div>
					</div>

					<div class="col-lg-4">
						<div class="panel panel-default">
							<div class="panel-heading">
								<h4>
									<span class="icon16 icomoon-icon-bars"></span>
									<span>Berdasarkan Jenis Kelamin</span>
								</h4>
								<a href="#" class="minimize">Minimize</a>
							</div>
							<div class="panel-body">
								<div class="simple-pie-6-2" style="height:230px;width:200px;"></div>
							</div>
						</div>
					</div>

					<div class="col-lg-4">
						<div class="panel panel-default">
							<div class="panel-heading">
								<h4>
									<span class="icon16 icomoon-icon-bars"></span>
									<span>Berdasarkan Usia</span>
								</h4>
								<a href="#" class="minimize">Minimize</a>
							</div>
							<div class="panel-body">
								<div class="simple-pie-6-3" style="height:230px;width:200px;"></div>
							</div>
						</div>
					</div>

					<div class="col-lg-4">
						<div class="panel panel-default">
							<div class="panel-heading">
								<h4>
									<span class="icon16 icomoon-icon-bars"></span>
									<span>Berdasarkan Perkerjaan</span>
								</h4>
								<a href="#" class="minimize">Minimize</a>
							</div>
							<div class="panel-body">
								<div class="simple-pie-6-4" style="height:230px;width:200px;"></div>
							</div>
						</div>
					</div>

					<div class="col-lg-4">
						<div class="panel panel-default">
							<div class="panel-heading">
								<h4>
									<span class="icon16 icomoon-icon-bars"></span>
									<span>Berdasarkan Pendidikan</span>
								</h4>
								<a href="#" class="minimize">Minimize</a>
							</div>
							<div class="panel-body">
								<div class="simple-pie-6-5" style="height:230px;width:200px;"></div>
							</div>
						</div>
					</div>

					<div class="col-lg-6">
						<div class="panel panel-default">
							<div class="panel-heading">
								<h4>
									<span class="icon16 icomoon-icon-bars"></span>
									<span>Berdasarkan Frekuensi Pengurusan Izin</span>
								</h4>
								<a href="#" class="minimize">Minimize</a>
							</div>
							<div class="panel-body">
								<div class="simple-pie-6-6" style="height:230px;width:400px;"></div>
							</div>
						</div>
					</div>
                </div>

                <div class="tab-pane fade" id="tab7" style="margin-bottom: 700px;">
					<div class="col-lg-12">
						<div class="panel panel-default">
							<div class="panel-heading">
								<h4>
									<span class="icon16 icomoon-icon-bars"></span>
									<span>Report Global Kepuasan Pelanggan</span>
								</h4>
								<a href="#" class="minimize">Minimize</a>
							</div>
							<div class="panel-body">
								<div class="simple-pie-7-1" style="height:300px;width:750px;"></div>
							</div>
						</div>
					</div>

					<div class="col-lg-12">
						<div class="panel panel-default chart">
							<div class="panel-heading">
								<h4>
									<span class="icon16 icomoon-icon-bars"></span>
									<span>Nilai Rata - Rata Per Pertanyaan</span>
								</h4>
								<a href="#" class="minimize">Minimize</a>
							</div>
							<div class="panel-body">
							   <div class="order-bars-chart-7" style="height:275px;width:730px;">
								</div>
							</div>
						</div>
					</div>

					<div class="col-lg-4">
						<div class="panel panel-default">
							<div class="panel-heading">
								<h4>
									<span class="icon16 icomoon-icon-bars"></span>
									<span>Berdasarkan Jenis Kelamin</span>
								</h4>
								<a href="#" class="minimize">Minimize</a>
							</div>
							<div class="panel-body">
								<div class="simple-pie-7-2" style="height:230px;width:200px;"></div>
							</div>
						</div>
					</div>

					<div class="col-lg-4">
						<div class="panel panel-default">
							<div class="panel-heading">
								<h4>
									<span class="icon16 icomoon-icon-bars"></span>
									<span>Berdasarkan Usia</span>
								</h4>
								<a href="#" class="minimize">Minimize</a>
							</div>
							<div class="panel-body">
								<div class="simple-pie-7-3" style="height:230px;width:200px;"></div>
							</div>
						</div>
					</div>

					<div class="col-lg-4">
						<div class="panel panel-default">
							<div class="panel-heading">
								<h4>
									<span class="icon16 icomoon-icon-bars"></span>
									<span>Berdasarkan Perkerjaan</span>
								</h4>
								<a href="#" class="minimize">Minimize</a>
							</div>
							<div class="panel-body">
								<div class="simple-pie-7-4" style="height:230px;width:200px;"></div>
							</div>
						</div>
					</div>

					<div class="col-lg-4">
						<div class="panel panel-default">
							<div class="panel-heading">
								<h4>
									<span class="icon16 icomoon-icon-bars"></span>
									<span>Berdasarkan Pendidikan</span>
								</h4>
								<a href="#" class="minimize">Minimize</a>
							</div>
							<div class="panel-body">
								<div class="simple-pie-7-5" style="height:230px;width:200px;"></div>
							</div>
						</div>
					</div>

					<div class="col-lg-6">
						<div class="panel panel-default">
							<div class="panel-heading">
								<h4>
									<span class="icon16 icomoon-icon-bars"></span>
									<span>Berdasarkan Frekuensi Pengurusan Izin</span>
								</h4>
								<a href="#" class="minimize">Minimize</a>
							</div>
							<div class="panel-body">
								<div class="simple-pie-7-6" style="height:230px;width:400px;"></div>
							</div>
						</div>
					</div>
                </div>

                <div class="tab-pane fade" id="tab8" style="margin-bottom: 700px;">
					<div class="col-lg-12">
						<div class="panel panel-default">
							<div class="panel-heading">
								<h4>
									<span class="icon16 icomoon-icon-bars"></span>
									<span>Report Global Kepuasan Pelanggan</span>
								</h4>
								<a href="#" class="minimize">Minimize</a>
							</div>
							<div class="panel-body">
								<div class="simple-pie-8-1" style="height:300px;width:750px;"></div>
							</div>
						</div>
					</div>

					<div class="col-lg-12">
						<div class="panel panel-default chart">
							<div class="panel-heading">
								<h4>
									<span class="icon16 icomoon-icon-bars"></span>
									<span>Nilai Rata - Rata Per Pertanyaan</span>
								</h4>
								<a href="#" class="minimize">Minimize</a>
							</div>
							<div class="panel-body">
							   <div class="order-bars-chart-8" style="height:275px;width:730px;">
								</div>
							</div>
						</div>
					</div>

					<div class="col-lg-4">
						<div class="panel panel-default">
							<div class="panel-heading">
								<h4>
									<span class="icon16 icomoon-icon-bars"></span>
									<span>Berdasarkan Jenis Kelamin</span>
								</h4>
								<a href="#" class="minimize">Minimize</a>
							</div>
							<div class="panel-body">
								<div class="simple-pie-8-2" style="height:230px;width:200px;"></div>
							</div>
						</div>
					</div>

					<div class="col-lg-4">
						<div class="panel panel-default">
							<div class="panel-heading">
								<h4>
									<span class="icon16 icomoon-icon-bars"></span>
									<span>Berdasarkan Usia</span>
								</h4>
								<a href="#" class="minimize">Minimize</a>
							</div>
							<div class="panel-body">
								<div class="simple-pie-8-3" style="height:230px;width:200px;"></div>
							</div>
						</div>
					</div>

					<div class="col-lg-4">
						<div class="panel panel-default">
							<div class="panel-heading">
								<h4>
									<span class="icon16 icomoon-icon-bars"></span>
									<span>Berdasarkan Perkerjaan</span>
								</h4>
								<a href="#" class="minimize">Minimize</a>
							</div>
							<div class="panel-body">
								<div class="simple-pie-8-4" style="height:230px;width:200px;"></div>
							</div>
						</div>
					</div>

					<div class="col-lg-4">
						<div class="panel panel-default">
							<div class="panel-heading">
								<h4>
									<span class="icon16 icomoon-icon-bars"></span>
									<span>Berdasarkan Pendidikan</span>
								</h4>
								<a href="#" class="minimize">Minimize</a>
							</div>
							<div class="panel-body">
								<div class="simple-pie-8-5" style="height:230px;width:200px;"></div>
							</div>
						</div>
					</div>

					<div class="col-lg-6">
						<div class="panel panel-default">
							<div class="panel-heading">
								<h4>
									<span class="icon16 icomoon-icon-bars"></span>
									<span>Berdasarkan Frekuensi Pengurusan Izin</span>
								</h4>
								<a href="#" class="minimize">Minimize</a>
							</div>
							<div class="panel-body">
								<div class="simple-pie-8-6" style="height:230px;width:400px;"></div>
							</div>
						</div>
					</div>
                </div>
            </div>
        </div>
    </div>

   	<div class="col-lg-1">
	</div>
</div>

<script language="javascript">
$(document).ready(function() {
    $('#myTab a').click(function (e) {
	  	e.preventDefault();
	  	$(this).tab('show');
	});

	var divElement = $('div'); //log all div elements

	if (divElement.hasClass('simple-pie-1-1')) {
	<?php
	$sangat_puas = 0;
	$puas = 0;
	$kurang_puas = 0;
	$tidak_puas = 0;
	$a = 0;
	foreach($query_0_1 as $row){
		// 1 - 1,75 : tidak puas
		// 1,76 - 2,5 : kurang puas
		// 2,51 - 3,25 : puas
		// 3,26 - 4 : sangat puas
		if( $row["HASIL"] >= 1 && $row["HASIL"] <= 1.75 ){
			$tidak_puas++;
		} elseif( $row["HASIL"] >= 1.76 && $row["HASIL"] <= 2.5 ) {
			$kurang_puas++;
		} elseif( $row["HASIL"] >= 2.51 && $row["HASIL"] <= 3.25 ) {
			$puas++;
		} else {
			$sangat_puas++;
		}
		// dump( $row["HASIL"] );
		$a++;
	}
	if($a > 0){
		$tidak_puas = $tidak_puas / $a * 100;
		$kurang_puas = $kurang_puas / $a * 100;
		$puas = $puas / $a * 100;
		$sangat_puas = 100 - $tidak_puas - $kurang_puas - $puas;
	}
	?>
	$(function () {
		var data = [
		    { label: "Tidak Puas : ",  data: <?php echo $tidak_puas; ?>, color: "#88bbc8"},
		    { label: "Kurang Puas : ", data: <?php echo $kurang_puas; ?>, color: "#ed7a53"},
		    { label: "Puas : ", data: <?php echo $puas; ?>, color: "#9FC569"},
		    { label: "Sangat Puas : ", data: <?php echo $sangat_puas; ?>, color: "#bbdce3"}
		];

	    $.plot($(".simple-pie-1-1"), data,
		{
			series: {
				pie: {
					show: true,
					highlight: {
						opacity: 0.1
					},
					radius: 1,
					stroke: {
						color: '#fff',
						width: 2
					},
					startAngle: 2,
				    combine: {
	                    color: '#353535',
	                    threshold: 0.05
	                },
	                label: {
	                    show: true,
	                    radius: 1,
	                    formatter: function(label, series){
	                        return '<div class="pie-chart-label">'+label+'&nbsp;'+Math.round(series.percent * 100) / 100 +'%</div>';
	                    }
	                }
				},
				grow: {	active: false}
			},
			legend:{show:false},
			grid: {
	            hoverable: true,
	            clickable: true
	        },
	        tooltip: true, //activate tooltip
			tooltipOpts: {
				content: "%s %y.2"+"%",
				shifts: {
					x: -30,
					y: -50
				}
			}
		});
	});
	}//end if


	if (divElement.hasClass('simple-pie-1-2')) {
	<?php
	$p = 0;
	$l = 0;
	$a = 0;
	foreach($query_0_1 as $row){
		if($row["jenis_kelamin"] == 'L'){
			$l++;
		} else {
			$p++;
		}
		$a++;
	}
	if($a > 0){
		$p	= $p / $a * 100;
		$l	= 100 - $p;
	}
	?>
	$(function () {
		var data = [
		    { label: "Perempuan : ",  data: <?php echo $p; ?>, color: "#88bbc8"},
		    { label: "Laki - Laki : ",  data: <?php echo $l; ?>, color: "#ed7a53"}
		];

	    $.plot($(".simple-pie-1-2"), data,
		{
			series: {
				pie: {
					show: true,
					highlight: {
						opacity: 0.1
					},
					radius: 1,
					stroke: {
						color: '#fff',
						width: 2
					},
					startAngle: 2,
				    combine: {
	                    color: '#353535',
	                    threshold: 0.05
	                },
	                label: {
	                    show: true,
	                    radius: 1,
	                    formatter: function(label, series){
	                        return '<div class="pie-chart-label">'+label+'&nbsp;'+Math.round(series.percent * 100) / 100 +'%</div>';
	                    }
	                }
				},
				grow: {	active: false}
			},
			legend:{show:false},
			grid: {
	            hoverable: true,
	            clickable: true
	        },
	        tooltip: true, //activate tooltip
			tooltipOpts: {
				content: "%s %y.2"+"%",
				shifts: {
					x: -30,
					y: -50
				}
			}
		});
	});
	}//end if
	if (divElement.hasClass('simple-pie-1-3')) {
	$(function () {
		var data = [
			<?php
			$a = 0;
			foreach($query_0_3 as $row){
			$a++;
			?>
			{ label: "<?php echo $row["range_usia"]; ?> : ",  data: <?php echo ($row["USIA"] / count($query_0_1) * 100); ?>, color: chartColours[<?php echo $a; ?>]},
			<?php
			}
			?>
		];

	    $.plot($(".simple-pie-1-3"), data,
		{
			series: {
				pie: {
					show: true,
					highlight: {
						opacity: 0.1
					},
					radius: 1,
					stroke: {
						color: '#fff',
						width: 2
					},
					startAngle: 2,
				    combine: {
	                    color: '#353535',
	                    threshold: 0.05
	                },
	                label: {
	                    show: true,
	                    radius: 1,
	                    formatter: function(label, series){
	                        return '<div class="pie-chart-label">'+label+'&nbsp;'+Math.round(series.percent * 100) / 100 +'%</div>';
	                    }
	                }
				},
				grow: {	active: false}
			},
			legend:{show:false},
			grid: {
	            hoverable: true,
	            clickable: true
	        },
	        tooltip: true, //activate tooltip
			tooltipOpts: {
				content: "%s %y.2"+"%",
				shifts: {
					x: -30,
					y: -50
				}
			}
		});
	});
	}//end if
	if (divElement.hasClass('simple-pie-1-4')) {
	$(function () {
		var data = [
			<?php
			$a = 0;
			foreach($query_0_4 as $row){
			$a++;
			?>
			{ label: "<?php echo $row["nm_pekerjaan"]; ?> : ",  data: <?php echo ($row["PEKERJAAN"] / count($query_0_1) * 100); ?>, color: chartColours[<?php echo $a; ?>]},
			<?php
			}
			?>
		];

	    $.plot($(".simple-pie-1-4"), data,
		{
			series: {
				pie: {
					show: true,
					highlight: {
						opacity: 0.1
					},
					radius: 1,
					stroke: {
						color: '#fff',
						width: 2
					},
					startAngle: 2,
				    combine: {
	                    color: '#353535',
	                    threshold: 0.05
	                },
	                label: {
	                    show: true,
	                    radius: 1,
	                    formatter: function(label, series){
	                        return '<div class="pie-chart-label">'+label+'&nbsp;'+Math.round(series.percent * 100) / 100 +'%</div>';
	                    }
	                }
				},
				grow: {	active: false}
			},
			legend:{show:false},
			grid: {
	            hoverable: true,
	            clickable: true
	        },
	        tooltip: true, //activate tooltip
			tooltipOpts: {
				content: "%s %y.2"+"%",
				shifts: {
					x: -30,
					y: -50
				}
			}
		});
	});
	}//end if
	if (divElement.hasClass('simple-pie-1-5')) {
	$(function () {
		var data = [
			<?php
			$a = 0;
			foreach($query_0_5 as $row){
			$a++;
			?>
			{ label: "<?php echo $row["nm_pendidikan"]; ?> : ",  data: <?php echo ($row["PENDIDIKAN"] / count($query_0_1) * 100); ?>, color: chartColours[<?php echo $a; ?>]},
			<?php
			}
			?>
		];

	    $.plot($(".simple-pie-1-5"), data,
		{
			series: {
				pie: {
					show: true,
					highlight: {
						opacity: 0.1
					},
					radius: 1,
					stroke: {
						color: '#fff',
						width: 2
					},
					startAngle: 2,
				    combine: {
	                    color: '#353535',
	                    threshold: 0.05
	                },
	                label: {
	                    show: true,
	                    radius: 1,
	                    formatter: function(label, series){
	                        return '<div class="pie-chart-label">'+label+'&nbsp;'+Math.round(series.percent * 100) / 100 +'%</div>';
	                    }
	                }
				},
				grow: {	active: false}
			},
			legend:{show:false},
			grid: {
	            hoverable: true,
	            clickable: true
	        },
	        tooltip: true, //activate tooltip
			tooltipOpts: {
				content: "%s %y.2"+"%",
				shifts: {
					x: -30,
					y: -50
				}
			}
		});
	});
	}//end if
	if (divElement.hasClass('simple-pie-1-6')) {
	$(function () {
		var data = [
			<?php
			$a = 0;
			foreach($query_0_6 as $row){
			$a++;
			?>
			{ label: "<?php echo $row["urus_izin"]; ?> kali : ",  data: <?php echo ($row["IZIN"] / count($query_0_1) * 100); ?>, color: chartColours[<?php echo $a; ?>]},
			<?php
			}
			?>
		];

	    $.plot($(".simple-pie-1-6"), data,
		{
			series: {
				pie: {
					show: true,
					highlight: {
						opacity: 0.1
					},
					radius: 1,
					stroke: {
						color: '#fff',
						width: 2
					},
					startAngle: 2,
				    combine: {
	                    color: '#353535',
	                    threshold: 0.05
	                },
	                label: {
	                    show: true,
	                    radius: 1,
	                    formatter: function(label, series){
	                        return '<div class="pie-chart-label">'+label+'&nbsp;'+Math.round(series.percent * 100) / 100 +'%</div>';
	                    }
	                }
				},
				grow: {	active: false}
			},
			legend:{show:false},
			grid: {
	            hoverable: true,
	            clickable: true
	        },
	        tooltip: true, //activate tooltip
			tooltipOpts: {
				content: "%s %y.2"+"%",
				shifts: {
					x: -30,
					y: -50
				}
			}
		});
	});
	}//end if


	var chartColours = ['#88bbc8', '#ed7a53', '#9FC569', '#bbdce3', '#9a3b1b', '#5a8022', '#2c7282'];
	if (divElement.hasClass('order-bars-chart-1')) {
	$(function () {
		//some data
		var d1 = [];
		<?php
		foreach($query_0_2 as $row){
		?>
		d1.push([<?php echo $row["URUTAN"]; ?>, <?php echo $row["HASIL"]; ?>]);
		<?php
		}
		?>

	    var ds = new Array();

	     ds.push({
	     	label: "Skor",
	        data:d1,
	        bars: {order: 1}
	    });

		var options = {
				bars: {
					show:true,
					barWidth: 0.1,
					fill:5
				},
				grid: {
					show: true,
				    aboveData: false,
				    color: "#3f3f3f" ,
				    labelMargin: 5,
				    axisMargin: 0,
				    borderWidth: 0,
				    borderColor:null,
				    minBorderMargin: 5 ,
				    clickable: true,
				    hoverable: true,
				    autoHighlight: false,
				    mouseActiveRadius: 20
				},
		        series: {
		        	grow: {active:false}
		        },
		        legend: { position: "ne" },
		        colors: chartColours,
		        tooltip: true, //activate tooltip
				tooltipOpts: {
					content: "%s : %y.2",
					shifts: {
						x: -30,
						y: -50
					}
				}
		};

		$.plot($(".order-bars-chart-1"), ds, options);
	});
	}//end if
});
</script>

<script language="javascript">
$(document).ready(function() {
	var divElement = $('div'); //log all div elements

	if (divElement.hasClass('simple-pie-2-1')) {
	<?php
	$sangat_puas = 0;
	$puas = 0;
	$kurang_puas = 0;
	$tidak_puas = 0;
	$a = 0;
	foreach($query_1_1 as $row){
		// 1 - 1,75 : tidak puas
		// 1,76 - 2,5 : kurang puas
		// 2,51 - 3,25 : puas
		// 3,26 - 4 : sangat puas
		if( $row["HASIL"] >= 1 && $row["HASIL"] <= 1.75 ){
			$tidak_puas++;
		} elseif( $row["HASIL"] >= 1.76 && $row["HASIL"] <= 2.5 ) {
			$kurang_puas++;
		} elseif( $row["HASIL"] >= 2.51 && $row["HASIL"] <= 3.25 ) {
			$puas++;
		} else {
			$sangat_puas++;
		}
		// dump( $row["HASIL"] );
		$a++;
	}
	if($a > 0){
		$tidak_puas = $tidak_puas / $a * 100;
		$kurang_puas = $kurang_puas / $a * 100;
		$puas = $puas / $a * 100;
		$sangat_puas = 100 - $tidak_puas - $kurang_puas - $puas;
	}
	?>
	$(function () {
		var data = [
		    { label: "Tidak Puas : ",  data: <?php echo $tidak_puas; ?>, color: "#88bbc8"},
		    { label: "Kurang Puas : ", data: <?php echo $kurang_puas; ?>, color: "#ed7a53"},
		    { label: "Puas : ", data: <?php echo $puas; ?>, color: "#9FC569"},
		    { label: "Sangat Puas : ", data: <?php echo $sangat_puas; ?>, color: "#bbdce3"}
		];

	    $.plot($(".simple-pie-2-1"), data,
		{
			series: {
				pie: {
					show: true,
					highlight: {
						opacity: 0.1
					},
					radius: 1,
					stroke: {
						color: '#fff',
						width: 2
					},
					startAngle: 2,
				    combine: {
	                    color: '#353535',
	                    threshold: 0.05
	                },
	                label: {
	                    show: true,
	                    radius: 1,
	                    formatter: function(label, series){
	                        return '<div class="pie-chart-label">'+label+'&nbsp;'+Math.round(series.percent * 100) / 100 +'%</div>';
	                    }
	                }
				},
				grow: {	active: false}
			},
			legend:{show:false},
			grid: {
	            hoverable: true,
	            clickable: true
	        },
	        tooltip: true, //activate tooltip
			tooltipOpts: {
				content: "%s %y.2"+"%",
				shifts: {
					x: -30,
					y: -50
				}
			}
		});
	});
	}//end if


	if (divElement.hasClass('simple-pie-2-2')) {
	<?php
	$p = 0;
	$l = 0;
	$a = 0;
	foreach($query_1_1 as $row){
		if($row["jenis_kelamin"] == 'L'){
			$l++;
		} else {
			$p++;
		}
		$a++;
	}
	if($a > 0){
		$p	= $p / $a * 100;
		$l	= 100 - $p;
	}
	?>
	$(function () {
		var data = [
		    { label: "Perempuan : ",  data: <?php echo $p; ?>, color: "#88bbc8"},
		    { label: "Laki - Laki : ",  data: <?php echo $l; ?>, color: "#ed7a53"}
		];

	    $.plot($(".simple-pie-2-2"), data,
		{
			series: {
				pie: {
					show: true,
					highlight: {
						opacity: 0.1
					},
					radius: 1,
					stroke: {
						color: '#fff',
						width: 2
					},
					startAngle: 2,
				    combine: {
	                    color: '#353535',
	                    threshold: 0.05
	                },
	                label: {
	                    show: true,
	                    radius: 1,
	                    formatter: function(label, series){
	                        return '<div class="pie-chart-label">'+label+'&nbsp;'+Math.round(series.percent * 100) / 100 +'%</div>';
	                    }
	                }
				},
				grow: {	active: false}
			},
			legend:{show:false},
			grid: {
	            hoverable: true,
	            clickable: true
	        },
	        tooltip: true, //activate tooltip
			tooltipOpts: {
				content: "%s %y.2"+"%",
				shifts: {
					x: -30,
					y: -50
				}
			}
		});
	});
	}//end if
	if (divElement.hasClass('simple-pie-2-3')) {
	$(function () {
		var data = [
			<?php
			$a = 0;
			foreach($query_1_3 as $row){
			$a++;
			?>
			{ label: "<?php echo $row["range_usia"]; ?> : ",  data: <?php echo ($row["USIA"] / count($query_1_1) * 100); ?>, color: chartColours[<?php echo $a; ?>]},
			<?php
			}
			?>
		];

	    $.plot($(".simple-pie-2-3"), data,
		{
			series: {
				pie: {
					show: true,
					highlight: {
						opacity: 0.1
					},
					radius: 1,
					stroke: {
						color: '#fff',
						width: 2
					},
					startAngle: 2,
				    combine: {
	                    color: '#353535',
	                    threshold: 0.05
	                },
	                label: {
	                    show: true,
	                    radius: 1,
	                    formatter: function(label, series){
	                        return '<div class="pie-chart-label">'+label+'&nbsp;'+Math.round(series.percent * 100) / 100 +'%</div>';
	                    }
	                }
				},
				grow: {	active: false}
			},
			legend:{show:false},
			grid: {
	            hoverable: true,
	            clickable: true
	        },
	        tooltip: true, //activate tooltip
			tooltipOpts: {
				content: "%s %y.2"+"%",
				shifts: {
					x: -30,
					y: -50
				}
			}
		});
	});
	}//end if
	if (divElement.hasClass('simple-pie-2-4')) {
	$(function () {
		var data = [
			<?php
			$a = 0;
			foreach($query_1_4 as $row){
			$a++;
			?>
			{ label: "<?php echo $row["nm_pekerjaan"]; ?> : ",  data: <?php echo ($row["PEKERJAAN"] / count($query_1_1) * 100); ?>, color: chartColours[<?php echo $a; ?>]},
			<?php
			}
			?>
		];

	    $.plot($(".simple-pie-2-4"), data,
		{
			series: {
				pie: {
					show: true,
					highlight: {
						opacity: 0.1
					},
					radius: 1,
					stroke: {
						color: '#fff',
						width: 2
					},
					startAngle: 2,
				    combine: {
	                    color: '#353535',
	                    threshold: 0.05
	                },
	                label: {
	                    show: true,
	                    radius: 1,
	                    formatter: function(label, series){
	                        return '<div class="pie-chart-label">'+label+'&nbsp;'+Math.round(series.percent * 100) / 100 +'%</div>';
	                    }
	                }
				},
				grow: {	active: false}
			},
			legend:{show:false},
			grid: {
	            hoverable: true,
	            clickable: true
	        },
	        tooltip: true, //activate tooltip
			tooltipOpts: {
				content: "%s %y.2"+"%",
				shifts: {
					x: -30,
					y: -50
				}
			}
		});
	});
	}//end if
	if (divElement.hasClass('simple-pie-2-5')) {
	$(function () {
		var data = [
			<?php
			$a = 0;
			foreach($query_1_5 as $row){
			$a++;
			?>
			{ label: "<?php echo $row["nm_pendidikan"]; ?> : ",  data: <?php echo ($row["PENDIDIKAN"] / count($query_1_1) * 100); ?>, color: chartColours[<?php echo $a; ?>]},
			<?php
			}
			?>
		];

	    $.plot($(".simple-pie-2-5"), data,
		{
			series: {
				pie: {
					show: true,
					highlight: {
						opacity: 0.1
					},
					radius: 1,
					stroke: {
						color: '#fff',
						width: 2
					},
					startAngle: 2,
				    combine: {
	                    color: '#353535',
	                    threshold: 0.05
	                },
	                label: {
	                    show: true,
	                    radius: 1,
	                    formatter: function(label, series){
	                        return '<div class="pie-chart-label">'+label+'&nbsp;'+Math.round(series.percent * 100) / 100 +'%</div>';
	                    }
	                }
				},
				grow: {	active: false}
			},
			legend:{show:false},
			grid: {
	            hoverable: true,
	            clickable: true
	        },
	        tooltip: true, //activate tooltip
			tooltipOpts: {
				content: "%s %y.2"+"%",
				shifts: {
					x: -30,
					y: -50
				}
			}
		});
	});
	}//end if
	if (divElement.hasClass('simple-pie-2-6')) {
	$(function () {
		var data = [
			<?php
			$a = 0;
			foreach($query_1_6 as $row){
			$a++;
			?>
			{ label: "<?php echo $row["urus_izin"]; ?> kali : ",  data: <?php echo ($row["IZIN"] / count($query_1_1) * 100); ?>, color: chartColours[<?php echo $a; ?>]},
			<?php
			}
			?>
		];

	    $.plot($(".simple-pie-2-6"), data,
		{
			series: {
				pie: {
					show: true,
					highlight: {
						opacity: 0.1
					},
					radius: 1,
					stroke: {
						color: '#fff',
						width: 2
					},
					startAngle: 2,
				    combine: {
	                    color: '#353535',
	                    threshold: 0.05
	                },
	                label: {
	                    show: true,
	                    radius: 1,
	                    formatter: function(label, series){
	                        return '<div class="pie-chart-label">'+label+'&nbsp;'+Math.round(series.percent * 100) / 100 +'%</div>';
	                    }
	                }
				},
				grow: {	active: false}
			},
			legend:{show:false},
			grid: {
	            hoverable: true,
	            clickable: true
	        },
	        tooltip: true, //activate tooltip
			tooltipOpts: {
				content: "%s %y.2"+"%",
				shifts: {
					x: -30,
					y: -50
				}
			}
		});
	});
	}//end if


	var chartColours = ['#88bbc8', '#ed7a53', '#9FC569', '#bbdce3', '#9a3b1b', '#5a8022', '#2c7282'];
	if (divElement.hasClass('order-bars-chart-1')) {
	$(function () {
		//some data
		var d1 = [];
		<?php
		foreach($query_1_2 as $row){
		?>
		d1.push([<?php echo $row["URUTAN"]; ?>, <?php echo $row["HASIL"]; ?>]);
		<?php
		}
		?>

	    var ds = new Array();

	     ds.push({
	     	label: "Skor",
	        data:d1,
	        bars: {order: 1}
	    });

		var options = {
				bars: {
					show:true,
					barWidth: 0.1,
					fill:5
				},
				grid: {
					show: true,
				    aboveData: false,
				    color: "#3f3f3f" ,
				    labelMargin: 5,
				    axisMargin: 0,
				    borderWidth: 0,
				    borderColor:null,
				    minBorderMargin: 5 ,
				    clickable: true,
				    hoverable: true,
				    autoHighlight: false,
				    mouseActiveRadius: 20
				},
		        series: {
		        	grow: {active:false}
		        },
		        legend: { position: "ne" },
		        colors: chartColours,
		        tooltip: true, //activate tooltip
				tooltipOpts: {
					content: "%s : %y.2",
					shifts: {
						x: -30,
						y: -50
					}
				}
		};

		$.plot($(".order-bars-chart-2"), ds, options);
	});
	}//end if
});
</script>

<script language="javascript">
$(document).ready(function() {
	var divElement = $('div'); //log all div elements

	if (divElement.hasClass('simple-pie-3-1')) {
	<?php
	$sangat_puas = 0;
	$puas = 0;
	$kurang_puas = 0;
	$tidak_puas = 0;
	$a = 0;
	foreach($query_2_1 as $row){
		// 1 - 1,75 : tidak puas
		// 1,76 - 2,5 : kurang puas
		// 2,51 - 3,25 : puas
		// 3,26 - 4 : sangat puas
		if( $row["HASIL"] >= 1 && $row["HASIL"] <= 1.75 ){
			$tidak_puas++;
		} elseif( $row["HASIL"] >= 1.76 && $row["HASIL"] <= 2.5 ) {
			$kurang_puas++;
		} elseif( $row["HASIL"] >= 2.51 && $row["HASIL"] <= 3.25 ) {
			$puas++;
		} else {
			$sangat_puas++;
		}
		// dump( $row["HASIL"] );
		$a++;
	}
	if($a > 0){
		$tidak_puas = $tidak_puas / $a * 100;
		$kurang_puas = $kurang_puas / $a * 100;
		$puas = $puas / $a * 100;
		$sangat_puas = 100 - $tidak_puas - $kurang_puas - $puas;
	}
	?>
	$(function () {
		var data = [
		    { label: "Tidak Puas : ",  data: <?php echo $tidak_puas; ?>, color: "#88bbc8"},
		    { label: "Kurang Puas : ", data: <?php echo $kurang_puas; ?>, color: "#ed7a53"},
		    { label: "Puas : ", data: <?php echo $puas; ?>, color: "#9FC569"},
		    { label: "Sangat Puas : ", data: <?php echo $sangat_puas; ?>, color: "#bbdce3"}
		];

	    $.plot($(".simple-pie-3-1"), data,
		{
			series: {
				pie: {
					show: true,
					highlight: {
						opacity: 0.1
					},
					radius: 1,
					stroke: {
						color: '#fff',
						width: 2
					},
					startAngle: 2,
				    combine: {
	                    color: '#353535',
	                    threshold: 0.05
	                },
	                label: {
	                    show: true,
	                    radius: 1,
	                    formatter: function(label, series){
	                        return '<div class="pie-chart-label">'+label+'&nbsp;'+Math.round(series.percent * 100) / 100 +'%</div>';
	                    }
	                }
				},
				grow: {	active: false}
			},
			legend:{show:false},
			grid: {
	            hoverable: true,
	            clickable: true
	        },
	        tooltip: true, //activate tooltip
			tooltipOpts: {
				content: "%s %y.2"+"%",
				shifts: {
					x: -30,
					y: -50
				}
			}
		});
	});
	}//end if


	if (divElement.hasClass('simple-pie-3-2')) {
	<?php
	$p = 0;
	$l = 0;
	$a = 0;
	foreach($query_2_1 as $row){
		if($row["jenis_kelamin"] == 'L'){
			$l++;
		} else {
			$p++;
		}
		$a++;
	}
	if($a > 0){
		$p	= $p / $a * 100;
		$l	= 100 - $p;
	}
	?>
	$(function () {
		var data = [
		    { label: "Perempuan : ",  data: <?php echo $p; ?>, color: "#88bbc8"},
		    { label: "Laki - Laki : ",  data: <?php echo $l; ?>, color: "#ed7a53"}
		];

	    $.plot($(".simple-pie-3-2"), data,
		{
			series: {
				pie: {
					show: true,
					highlight: {
						opacity: 0.1
					},
					radius: 1,
					stroke: {
						color: '#fff',
						width: 2
					},
					startAngle: 2,
				    combine: {
	                    color: '#353535',
	                    threshold: 0.05
	                },
	                label: {
	                    show: true,
	                    radius: 1,
	                    formatter: function(label, series){
	                        return '<div class="pie-chart-label">'+label+'&nbsp;'+Math.round(series.percent * 100) / 100 +'%</div>';
	                    }
	                }
				},
				grow: {	active: false}
			},
			legend:{show:false},
			grid: {
	            hoverable: true,
	            clickable: true
	        },
	        tooltip: true, //activate tooltip
			tooltipOpts: {
				content: "%s %y.2"+"%",
				shifts: {
					x: -30,
					y: -50
				}
			}
		});
	});
	}//end if
	if (divElement.hasClass('simple-pie-3-3')) {
	$(function () {
		var data = [
			<?php
			$a = 0;
			foreach($query_2_3 as $row){
			$a++;
			?>
			{ label: "<?php echo $row["range_usia"]; ?> : ",  data: <?php echo ($row["USIA"] / count($query_2_1) * 100); ?>, color: chartColours[<?php echo $a; ?>]},
			<?php
			}
			?>
		];

	    $.plot($(".simple-pie-3-3"), data,
		{
			series: {
				pie: {
					show: true,
					highlight: {
						opacity: 0.1
					},
					radius: 1,
					stroke: {
						color: '#fff',
						width: 2
					},
					startAngle: 2,
				    combine: {
	                    color: '#353535',
	                    threshold: 0.05
	                },
	                label: {
	                    show: true,
	                    radius: 1,
	                    formatter: function(label, series){
	                        return '<div class="pie-chart-label">'+label+'&nbsp;'+Math.round(series.percent * 100) / 100 +'%</div>';
	                    }
	                }
				},
				grow: {	active: false}
			},
			legend:{show:false},
			grid: {
	            hoverable: true,
	            clickable: true
	        },
	        tooltip: true, //activate tooltip
			tooltipOpts: {
				content: "%s %y.2"+"%",
				shifts: {
					x: -30,
					y: -50
				}
			}
		});
	});
	}//end if
	if (divElement.hasClass('simple-pie-3-4')) {
	$(function () {
		var data = [
			<?php
			$a = 0;
			foreach($query_2_4 as $row){
			$a++;
			?>
			{ label: "<?php echo $row["nm_pekerjaan"]; ?> : ",  data: <?php echo ($row["PEKERJAAN"] / count($query_2_1) * 100); ?>, color: chartColours[<?php echo $a; ?>]},
			<?php
			}
			?>
		];

	    $.plot($(".simple-pie-3-4"), data,
		{
			series: {
				pie: {
					show: true,
					highlight: {
						opacity: 0.1
					},
					radius: 1,
					stroke: {
						color: '#fff',
						width: 2
					},
					startAngle: 2,
				    combine: {
	                    color: '#353535',
	                    threshold: 0.05
	                },
	                label: {
	                    show: true,
	                    radius: 1,
	                    formatter: function(label, series){
	                        return '<div class="pie-chart-label">'+label+'&nbsp;'+Math.round(series.percent * 100) / 100 +'%</div>';
	                    }
	                }
				},
				grow: {	active: false}
			},
			legend:{show:false},
			grid: {
	            hoverable: true,
	            clickable: true
	        },
	        tooltip: true, //activate tooltip
			tooltipOpts: {
				content: "%s %y.2"+"%",
				shifts: {
					x: -30,
					y: -50
				}
			}
		});
	});
	}//end if
	if (divElement.hasClass('simple-pie-3-5')) {
	$(function () {
		var data = [
			<?php
			$a = 0;
			foreach($query_2_5 as $row){
			$a++;
			?>
			{ label: "<?php echo $row["nm_pendidikan"]; ?> : ",  data: <?php echo ($row["PENDIDIKAN"] / count($query_2_1) * 100); ?>, color: chartColours[<?php echo $a; ?>]},
			<?php
			}
			?>
		];

	    $.plot($(".simple-pie-3-5"), data,
		{
			series: {
				pie: {
					show: true,
					highlight: {
						opacity: 0.1
					},
					radius: 1,
					stroke: {
						color: '#fff',
						width: 2
					},
					startAngle: 2,
				    combine: {
	                    color: '#353535',
	                    threshold: 0.05
	                },
	                label: {
	                    show: true,
	                    radius: 1,
	                    formatter: function(label, series){
	                        return '<div class="pie-chart-label">'+label+'&nbsp;'+Math.round(series.percent * 100) / 100 +'%</div>';
	                    }
	                }
				},
				grow: {	active: false}
			},
			legend:{show:false},
			grid: {
	            hoverable: true,
	            clickable: true
	        },
	        tooltip: true, //activate tooltip
			tooltipOpts: {
				content: "%s %y.2"+"%",
				shifts: {
					x: -30,
					y: -50
				}
			}
		});
	});
	}//end if
	if (divElement.hasClass('simple-pie-3-6')) {
	$(function () {
		var data = [
			<?php
			$a = 0;
			foreach($query_2_6 as $row){
			$a++;
			?>
			{ label: "<?php echo $row["urus_izin"]; ?> kali : ",  data: <?php echo ($row["IZIN"] / count($query_2_1) * 100); ?>, color: chartColours[<?php echo $a; ?>]},
			<?php
			}
			?>
		];

	    $.plot($(".simple-pie-3-6"), data,
		{
			series: {
				pie: {
					show: true,
					highlight: {
						opacity: 0.1
					},
					radius: 1,
					stroke: {
						color: '#fff',
						width: 2
					},
					startAngle: 2,
				    combine: {
	                    color: '#353535',
	                    threshold: 0.05
	                },
	                label: {
	                    show: true,
	                    radius: 1,
	                    formatter: function(label, series){
	                        return '<div class="pie-chart-label">'+label+'&nbsp;'+Math.round(series.percent * 100) / 100 +'%</div>';
	                    }
	                }
				},
				grow: {	active: false}
			},
			legend:{show:false},
			grid: {
	            hoverable: true,
	            clickable: true
	        },
	        tooltip: true, //activate tooltip
			tooltipOpts: {
				content: "%s %y.2"+"%",
				shifts: {
					x: -30,
					y: -50
				}
			}
		});
	});
	}//end if


	var chartColours = ['#88bbc8', '#ed7a53', '#9FC569', '#bbdce3', '#9a3b1b', '#5a8022', '#2c7282'];
	if (divElement.hasClass('order-bars-chart-1')) {
	$(function () {
		//some data
		var d1 = [];
		<?php
		foreach($query_2_2 as $row){
		?>
		d1.push([<?php echo $row["URUTAN"]; ?>, <?php echo $row["HASIL"]; ?>]);
		<?php
		}
		?>

	    var ds = new Array();

	     ds.push({
	     	label: "Skor",
	        data:d1,
	        bars: {order: 1}
	    });

		var options = {
				bars: {
					show:true,
					barWidth: 0.1,
					fill:5
				},
				grid: {
					show: true,
				    aboveData: false,
				    color: "#3f3f3f" ,
				    labelMargin: 5,
				    axisMargin: 0,
				    borderWidth: 0,
				    borderColor:null,
				    minBorderMargin: 5 ,
				    clickable: true,
				    hoverable: true,
				    autoHighlight: false,
				    mouseActiveRadius: 20
				},
		        series: {
		        	grow: {active:false}
		        },
		        legend: { position: "ne" },
		        colors: chartColours,
		        tooltip: true, //activate tooltip
				tooltipOpts: {
					content: "%s : %y.2",
					shifts: {
						x: -30,
						y: -50
					}
				}
		};

		$.plot($(".order-bars-chart-3"), ds, options);
	});
	}//end if
});
</script>

<script language="javascript">
$(document).ready(function() {
	var divElement = $('div'); //log all div elements

	if (divElement.hasClass('simple-pie-4-1')) {
	<?php
	$sangat_puas = 0;
	$puas = 0;
	$kurang_puas = 0;
	$tidak_puas = 0;
	$a = 0;
	foreach($quyery_3_1 as $row){
		// 1 - 1,75 : tidak puas
		// 1,76 - 2,5 : kurang puas
		// 2,51 - 3,25 : puas
		// 3,26 - 4 : sangat puas
		if( $row["HASIL"] >= 1 && $row["HASIL"] <= 1.75 ){
			$tidak_puas++;
		} elseif( $row["HASIL"] >= 1.76 && $row["HASIL"] <= 2.5 ) {
			$kurang_puas++;
		} elseif( $row["HASIL"] >= 2.51 && $row["HASIL"] <= 3.25 ) {
			$puas++;
		} else {
			$sangat_puas++;
		}
		// dump( $row["HASIL"] );
		$a++;
	}
	if($a > 0){
		$tidak_puas = $tidak_puas / $a * 100;
		$kurang_puas = $kurang_puas / $a * 100;
		$puas = $puas / $a * 100;
		$sangat_puas = 100 - $tidak_puas - $kurang_puas - $puas;
	}
	?>
	$(function () {
		var data = [
		    { label: "Tidak Puas : ",  data: <?php echo $tidak_puas; ?>, color: "#88bbc8"},
		    { label: "Kurang Puas : ", data: <?php echo $kurang_puas; ?>, color: "#ed7a53"},
		    { label: "Puas : ", data: <?php echo $puas; ?>, color: "#9FC569"},
		    { label: "Sangat Puas : ", data: <?php echo $sangat_puas; ?>, color: "#bbdce3"}
		];

	    $.plot($(".simple-pie-4-1"), data,
		{
			series: {
				pie: {
					show: true,
					highlight: {
						opacity: 0.1
					},
					radius: 1,
					stroke: {
						color: '#fff',
						width: 2
					},
					startAngle: 2,
				    combine: {
	                    color: '#353535',
	                    threshold: 0.05
	                },
	                label: {
	                    show: true,
	                    radius: 1,
	                    formatter: function(label, series){
	                        return '<div class="pie-chart-label">'+label+'&nbsp;'+Math.round(series.percent * 100) / 100 +'%</div>';
	                    }
	                }
				},
				grow: {	active: false}
			},
			legend:{show:false},
			grid: {
	            hoverable: true,
	            clickable: true
	        },
	        tooltip: true, //activate tooltip
			tooltipOpts: {
				content: "%s %y.2"+"%",
				shifts: {
					x: -30,
					y: -50
				}
			}
		});
	});
	}//end if


	if (divElement.hasClass('simple-pie-4-2')) {
	<?php
	$p = 0;
	$l = 0;
	$a = 0;
	foreach($quyery_3_1 as $row){
		if($row["jenis_kelamin"] == 'L'){
			$l++;
		} else {
			$p++;
		}
		$a++;
	}
	if($a > 0){
		$p	= $p / $a * 100;
		$l	= 100 - $p;
	}
	?>
	$(function () {
		var data = [
		    { label: "Perempuan : ",  data: <?php echo $p; ?>, color: "#88bbc8"},
		    { label: "Laki - Laki : ",  data: <?php echo $l; ?>, color: "#ed7a53"}
		];

	    $.plot($(".simple-pie-4-2"), data,
		{
			series: {
				pie: {
					show: true,
					highlight: {
						opacity: 0.1
					},
					radius: 1,
					stroke: {
						color: '#fff',
						width: 2
					},
					startAngle: 2,
				    combine: {
	                    color: '#353535',
	                    threshold: 0.05
	                },
	                label: {
	                    show: true,
	                    radius: 1,
	                    formatter: function(label, series){
	                        return '<div class="pie-chart-label">'+label+'&nbsp;'+Math.round(series.percent * 100) / 100 +'%</div>';
	                    }
	                }
				},
				grow: {	active: false}
			},
			legend:{show:false},
			grid: {
	            hoverable: true,
	            clickable: true
	        },
	        tooltip: true, //activate tooltip
			tooltipOpts: {
				content: "%s %y.2"+"%",
				shifts: {
					x: -30,
					y: -50
				}
			}
		});
	});
	}//end if
	if (divElement.hasClass('simple-pie-4-3')) {
	$(function () {
		var data = [
			<?php
			$a = 0;
			foreach($quyery_3_3 as $row){
			$a++;
			?>
			{ label: "<?php echo $row["range_usia"]; ?> : ",  data: <?php echo ($row["USIA"] / count($quyery_3_1) * 100); ?>, color: chartColours[<?php echo $a; ?>]},
			<?php
			}
			?>
		];

	    $.plot($(".simple-pie-4-3"), data,
		{
			series: {
				pie: {
					show: true,
					highlight: {
						opacity: 0.1
					},
					radius: 1,
					stroke: {
						color: '#fff',
						width: 2
					},
					startAngle: 2,
				    combine: {
	                    color: '#353535',
	                    threshold: 0.05
	                },
	                label: {
	                    show: true,
	                    radius: 1,
	                    formatter: function(label, series){
	                        return '<div class="pie-chart-label">'+label+'&nbsp;'+Math.round(series.percent * 100) / 100 +'%</div>';
	                    }
	                }
				},
				grow: {	active: false}
			},
			legend:{show:false},
			grid: {
	            hoverable: true,
	            clickable: true
	        },
	        tooltip: true, //activate tooltip
			tooltipOpts: {
				content: "%s %y.2"+"%",
				shifts: {
					x: -30,
					y: -50
				}
			}
		});
	});
	}//end if
	if (divElement.hasClass('simple-pie-4-4')) {
	$(function () {
		var data = [
			<?php
			$a = 0;
			foreach($quyery_3_4 as $row){
			$a++;
			?>
			{ label: "<?php echo $row["nm_pekerjaan"]; ?> : ",  data: <?php echo ($row["PEKERJAAN"] / count($quyery_3_1) * 100); ?>, color: chartColours[<?php echo $a; ?>]},
			<?php
			}
			?>
		];

	    $.plot($(".simple-pie-4-4"), data,
		{
			series: {
				pie: {
					show: true,
					highlight: {
						opacity: 0.1
					},
					radius: 1,
					stroke: {
						color: '#fff',
						width: 2
					},
					startAngle: 2,
				    combine: {
	                    color: '#353535',
	                    threshold: 0.05
	                },
	                label: {
	                    show: true,
	                    radius: 1,
	                    formatter: function(label, series){
	                        return '<div class="pie-chart-label">'+label+'&nbsp;'+Math.round(series.percent * 100) / 100 +'%</div>';
	                    }
	                }
				},
				grow: {	active: false}
			},
			legend:{show:false},
			grid: {
	            hoverable: true,
	            clickable: true
	        },
	        tooltip: true, //activate tooltip
			tooltipOpts: {
				content: "%s %y.2"+"%",
				shifts: {
					x: -30,
					y: -50
				}
			}
		});
	});
	}//end if
	if (divElement.hasClass('simple-pie-4-5')) {
	$(function () {
		var data = [
			<?php
			$a = 0;
			foreach($quyery_3_5 as $row){
			$a++;
			?>
			{ label: "<?php echo $row["nm_pendidikan"]; ?> : ",  data: <?php echo ($row["PENDIDIKAN"] / count($quyery_3_1) * 100); ?>, color: chartColours[<?php echo $a; ?>]},
			<?php
			}
			?>
		];

	    $.plot($(".simple-pie-4-5"), data,
		{
			series: {
				pie: {
					show: true,
					highlight: {
						opacity: 0.1
					},
					radius: 1,
					stroke: {
						color: '#fff',
						width: 2
					},
					startAngle: 2,
				    combine: {
	                    color: '#353535',
	                    threshold: 0.05
	                },
	                label: {
	                    show: true,
	                    radius: 1,
	                    formatter: function(label, series){
	                        return '<div class="pie-chart-label">'+label+'&nbsp;'+Math.round(series.percent * 100) / 100 +'%</div>';
	                    }
	                }
				},
				grow: {	active: false}
			},
			legend:{show:false},
			grid: {
	            hoverable: true,
	            clickable: true
	        },
	        tooltip: true, //activate tooltip
			tooltipOpts: {
				content: "%s %y.2"+"%",
				shifts: {
					x: -30,
					y: -50
				}
			}
		});
	});
	}//end if
	if (divElement.hasClass('simple-pie-4-6')) {
	$(function () {
		var data = [
			<?php
			$a = 0;
			foreach($quyery_3_6 as $row){
			$a++;
			?>
			{ label: "<?php echo $row["urus_izin"]; ?> kali : ",  data: <?php echo ($row["IZIN"] / count($quyery_3_1) * 100); ?>, color: chartColours[<?php echo $a; ?>]},
			<?php
			}
			?>
		];

	    $.plot($(".simple-pie-4-6"), data,
		{
			series: {
				pie: {
					show: true,
					highlight: {
						opacity: 0.1
					},
					radius: 1,
					stroke: {
						color: '#fff',
						width: 2
					},
					startAngle: 2,
				    combine: {
	                    color: '#353535',
	                    threshold: 0.05
	                },
	                label: {
	                    show: true,
	                    radius: 1,
	                    formatter: function(label, series){
	                        return '<div class="pie-chart-label">'+label+'&nbsp;'+Math.round(series.percent * 100) / 100 +'%</div>';
	                    }
	                }
				},
				grow: {	active: false}
			},
			legend:{show:false},
			grid: {
	            hoverable: true,
	            clickable: true
	        },
	        tooltip: true, //activate tooltip
			tooltipOpts: {
				content: "%s %y.2"+"%",
				shifts: {
					x: -30,
					y: -50
				}
			}
		});
	});
	}//end if


	var chartColours = ['#88bbc8', '#ed7a53', '#9FC569', '#bbdce3', '#9a3b1b', '#5a8022', '#2c7282'];
	if (divElement.hasClass('order-bars-chart-1')) {
	$(function () {
		//some data
		var d1 = [];
		<?php
		foreach($quyery_3_2 as $row){
		?>
		d1.push([<?php echo $row["URUTAN"]; ?>, <?php echo $row["HASIL"]; ?>]);
		<?php
		}
		?>

	    var ds = new Array();

	     ds.push({
	     	label: "Skor",
	        data:d1,
	        bars: {order: 1}
	    });

		var options = {
				bars: {
					show:true,
					barWidth: 0.1,
					fill:5
				},
				grid: {
					show: true,
				    aboveData: false,
				    color: "#3f3f3f" ,
				    labelMargin: 5,
				    axisMargin: 0,
				    borderWidth: 0,
				    borderColor:null,
				    minBorderMargin: 5 ,
				    clickable: true,
				    hoverable: true,
				    autoHighlight: false,
				    mouseActiveRadius: 20
				},
		        series: {
		        	grow: {active:false}
		        },
		        legend: { position: "ne" },
		        colors: chartColours,
		        tooltip: true, //activate tooltip
				tooltipOpts: {
					content: "%s : %y.2",
					shifts: {
						x: -30,
						y: -50
					}
				}
		};

		$.plot($(".order-bars-chart-4"), ds, options);
	});
	}//end if
});
</script>

<script language="javascript">
$(document).ready(function() {
	var divElement = $('div'); //log all div elements

	if (divElement.hasClass('simple-pie-5-1')) {
	<?php
	$sangat_puas = 0;
	$puas = 0;
	$kurang_puas = 0;
	$tidak_puas = 0;
	$a = 0;
	foreach($query_4_1 as $row){
		// 1 - 1,75 : tidak puas
		// 1,76 - 2,5 : kurang puas
		// 2,51 - 3,25 : puas
		// 3,26 - 4 : sangat puas
		if( $row["HASIL"] >= 1 && $row["HASIL"] <= 1.75 ){
			$tidak_puas++;
		} elseif( $row["HASIL"] >= 1.76 && $row["HASIL"] <= 2.5 ) {
			$kurang_puas++;
		} elseif( $row["HASIL"] >= 2.51 && $row["HASIL"] <= 3.25 ) {
			$puas++;
		} else {
			$sangat_puas++;
		}
		// dump( $row["HASIL"] );
		$a++;
	}
	if($a > 0){
		$tidak_puas = $tidak_puas / $a * 100;
		$kurang_puas = $kurang_puas / $a * 100;
		$puas = $puas / $a * 100;
		$sangat_puas = 100 - $tidak_puas - $kurang_puas - $puas;
	}
	?>
	$(function () {
		var data = [
		    { label: "Tidak Puas : ",  data: <?php echo $tidak_puas; ?>, color: "#88bbc8"},
		    { label: "Kurang Puas : ", data: <?php echo $kurang_puas; ?>, color: "#ed7a53"},
		    { label: "Puas : ", data: <?php echo $puas; ?>, color: "#9FC569"},
		    { label: "Sangat Puas : ", data: <?php echo $sangat_puas; ?>, color: "#bbdce3"}
		];

	    $.plot($(".simple-pie-5-1"), data,
		{
			series: {
				pie: {
					show: true,
					highlight: {
						opacity: 0.1
					},
					radius: 1,
					stroke: {
						color: '#fff',
						width: 2
					},
					startAngle: 2,
				    combine: {
	                    color: '#353535',
	                    threshold: 0.05
	                },
	                label: {
	                    show: true,
	                    radius: 1,
	                    formatter: function(label, series){
	                        return '<div class="pie-chart-label">'+label+'&nbsp;'+Math.round(series.percent * 100) / 100 +'%</div>';
	                    }
	                }
				},
				grow: {	active: false}
			},
			legend:{show:false},
			grid: {
	            hoverable: true,
	            clickable: true
	        },
	        tooltip: true, //activate tooltip
			tooltipOpts: {
				content: "%s %y.2"+"%",
				shifts: {
					x: -30,
					y: -50
				}
			}
		});
	});
	}//end if


	if (divElement.hasClass('simple-pie-5-2')) {
	<?php
	$p = 0;
	$l = 0;
	$a = 0;
	foreach($query_4_1 as $row){
		if($row["jenis_kelamin"] == 'L'){
			$l++;
		} else {
			$p++;
		}
		$a++;
	}
	if($a > 0){
		$p	= $p / $a * 100;
		$l	= 100 - $p;
	}
	?>
	$(function () {
		var data = [
		    { label: "Perempuan : ",  data: <?php echo $p; ?>, color: "#88bbc8"},
		    { label: "Laki - Laki : ",  data: <?php echo $l; ?>, color: "#ed7a53"}
		];

	    $.plot($(".simple-pie-5-2"), data,
		{
			series: {
				pie: {
					show: true,
					highlight: {
						opacity: 0.1
					},
					radius: 1,
					stroke: {
						color: '#fff',
						width: 2
					},
					startAngle: 2,
				    combine: {
	                    color: '#353535',
	                    threshold: 0.05
	                },
	                label: {
	                    show: true,
	                    radius: 1,
	                    formatter: function(label, series){
	                        return '<div class="pie-chart-label">'+label+'&nbsp;'+Math.round(series.percent * 100) / 100 +'%</div>';
	                    }
	                }
				},
				grow: {	active: false}
			},
			legend:{show:false},
			grid: {
	            hoverable: true,
	            clickable: true
	        },
	        tooltip: true, //activate tooltip
			tooltipOpts: {
				content: "%s %y.2"+"%",
				shifts: {
					x: -30,
					y: -50
				}
			}
		});
	});
	}//end if
	if (divElement.hasClass('simple-pie-5-3')) {
	$(function () {
		var data = [
			<?php
			$a = 0;
			foreach($query_4_3 as $row){
			$a++;
			?>
			{ label: "<?php echo $row["range_usia"]; ?> : ",  data: <?php echo ($row["USIA"] / count($query_4_1) * 100); ?>, color: chartColours[<?php echo $a; ?>]},
			<?php
			}
			?>
		];

	    $.plot($(".simple-pie-5-3"), data,
		{
			series: {
				pie: {
					show: true,
					highlight: {
						opacity: 0.1
					},
					radius: 1,
					stroke: {
						color: '#fff',
						width: 2
					},
					startAngle: 2,
				    combine: {
	                    color: '#353535',
	                    threshold: 0.05
	                },
	                label: {
	                    show: true,
	                    radius: 1,
	                    formatter: function(label, series){
	                        return '<div class="pie-chart-label">'+label+'&nbsp;'+Math.round(series.percent * 100) / 100 +'%</div>';
	                    }
	                }
				},
				grow: {	active: false}
			},
			legend:{show:false},
			grid: {
	            hoverable: true,
	            clickable: true
	        },
	        tooltip: true, //activate tooltip
			tooltipOpts: {
				content: "%s %y.2"+"%",
				shifts: {
					x: -30,
					y: -50
				}
			}
		});
	});
	}//end if
	if (divElement.hasClass('simple-pie-5-4')) {
	$(function () {
		var data = [
			<?php
			$a = 0;
			foreach($query_4_4 as $row){
			$a++;
			?>
			{ label: "<?php echo $row["nm_pekerjaan"]; ?> : ",  data: <?php echo ($row["PEKERJAAN"] / count($query_4_1) * 100); ?>, color: chartColours[<?php echo $a; ?>]},
			<?php
			}
			?>
		];

	    $.plot($(".simple-pie-5-4"), data,
		{
			series: {
				pie: {
					show: true,
					highlight: {
						opacity: 0.1
					},
					radius: 1,
					stroke: {
						color: '#fff',
						width: 2
					},
					startAngle: 2,
				    combine: {
	                    color: '#353535',
	                    threshold: 0.05
	                },
	                label: {
	                    show: true,
	                    radius: 1,
	                    formatter: function(label, series){
	                        return '<div class="pie-chart-label">'+label+'&nbsp;'+Math.round(series.percent * 100) / 100 +'%</div>';
	                    }
	                }
				},
				grow: {	active: false}
			},
			legend:{show:false},
			grid: {
	            hoverable: true,
	            clickable: true
	        },
	        tooltip: true, //activate tooltip
			tooltipOpts: {
				content: "%s %y.2"+"%",
				shifts: {
					x: -30,
					y: -50
				}
			}
		});
	});
	}//end if
	if (divElement.hasClass('simple-pie-5-5')) {
	$(function () {
		var data = [
			<?php
			$a = 0;
			foreach($query_4_5 as $row){
			$a++;
			?>
			{ label: "<?php echo $row["nm_pendidikan"]; ?> : ",  data: <?php echo ($row["PENDIDIKAN"] / count($query_4_1) * 100); ?>, color: chartColours[<?php echo $a; ?>]},
			<?php
			}
			?>
		];

	    $.plot($(".simple-pie-5-5"), data,
		{
			series: {
				pie: {
					show: true,
					highlight: {
						opacity: 0.1
					},
					radius: 1,
					stroke: {
						color: '#fff',
						width: 2
					},
					startAngle: 2,
				    combine: {
	                    color: '#353535',
	                    threshold: 0.05
	                },
	                label: {
	                    show: true,
	                    radius: 1,
	                    formatter: function(label, series){
	                        return '<div class="pie-chart-label">'+label+'&nbsp;'+Math.round(series.percent * 100) / 100 +'%</div>';
	                    }
	                }
				},
				grow: {	active: false}
			},
			legend:{show:false},
			grid: {
	            hoverable: true,
	            clickable: true
	        },
	        tooltip: true, //activate tooltip
			tooltipOpts: {
				content: "%s %y.2"+"%",
				shifts: {
					x: -30,
					y: -50
				}
			}
		});
	});
	}//end if
	if (divElement.hasClass('simple-pie-5-6')) {
	$(function () {
		var data = [
			<?php
			$a = 0;
			foreach($query_4_6 as $row){
			$a++;
			?>
			{ label: "<?php echo $row["urus_izin"]; ?> kali : ",  data: <?php echo ($row["IZIN"] / count($query_4_1) * 100); ?>, color: chartColours[<?php echo $a; ?>]},
			<?php
			}
			?>
		];

	    $.plot($(".simple-pie-5-6"), data,
		{
			series: {
				pie: {
					show: true,
					highlight: {
						opacity: 0.1
					},
					radius: 1,
					stroke: {
						color: '#fff',
						width: 2
					},
					startAngle: 2,
				    combine: {
	                    color: '#353535',
	                    threshold: 0.05
	                },
	                label: {
	                    show: true,
	                    radius: 1,
	                    formatter: function(label, series){
	                        return '<div class="pie-chart-label">'+label+'&nbsp;'+Math.round(series.percent * 100) / 100 +'%</div>';
	                    }
	                }
				},
				grow: {	active: false}
			},
			legend:{show:false},
			grid: {
	            hoverable: true,
	            clickable: true
	        },
	        tooltip: true, //activate tooltip
			tooltipOpts: {
				content: "%s %y.2"+"%",
				shifts: {
					x: -30,
					y: -50
				}
			}
		});
	});
	}//end if


	var chartColours = ['#88bbc8', '#ed7a53', '#9FC569', '#bbdce3', '#9a3b1b', '#5a8022', '#2c7282'];
	if (divElement.hasClass('order-bars-chart-1')) {
	$(function () {
		//some data
		var d1 = [];
		<?php
		foreach($query_4_2 as $row){
		?>
		d1.push([<?php echo $row["URUTAN"]; ?>, <?php echo $row["HASIL"]; ?>]);
		<?php
		}
		?>

	    var ds = new Array();

	     ds.push({
	     	label: "Skor",
	        data:d1,
	        bars: {order: 1}
	    });

		var options = {
				bars: {
					show:true,
					barWidth: 0.1,
					fill:5
				},
				grid: {
					show: true,
				    aboveData: false,
				    color: "#3f3f3f" ,
				    labelMargin: 5,
				    axisMargin: 0,
				    borderWidth: 0,
				    borderColor:null,
				    minBorderMargin: 5 ,
				    clickable: true,
				    hoverable: true,
				    autoHighlight: false,
				    mouseActiveRadius: 20
				},
		        series: {
		        	grow: {active:false}
		        },
		        legend: { position: "ne" },
		        colors: chartColours,
		        tooltip: true, //activate tooltip
				tooltipOpts: {
					content: "%s : %y.2",
					shifts: {
						x: -30,
						y: -50
					}
				}
		};

		$.plot($(".order-bars-chart-5"), ds, options);
	});
	}//end if
});
</script>

<script language="javascript">
$(document).ready(function() {
	var divElement = $('div'); //log all div elements

	if (divElement.hasClass('simple-pie-6-1')) {
	<?php
	$sangat_puas = 0;
	$puas = 0;
	$kurang_puas = 0;
	$tidak_puas = 0;
	$a = 0;
	foreach($query_5_1 as $row){
		// 1 - 1,75 : tidak puas
		// 1,76 - 2,5 : kurang puas
		// 2,51 - 3,25 : puas
		// 3,26 - 4 : sangat puas
		if( $row["HASIL"] >= 1 && $row["HASIL"] <= 1.75 ){
			$tidak_puas++;
		} elseif( $row["HASIL"] >= 1.76 && $row["HASIL"] <= 2.5 ) {
			$kurang_puas++;
		} elseif( $row["HASIL"] >= 2.51 && $row["HASIL"] <= 3.25 ) {
			$puas++;
		} else {
			$sangat_puas++;
		}
		// dump( $row["HASIL"] );
		$a++;
	}
	if($a > 0){
		$tidak_puas = $tidak_puas / $a * 100;
		$kurang_puas = $kurang_puas / $a * 100;
		$puas = $puas / $a * 100;
		$sangat_puas = 100 - $tidak_puas - $kurang_puas - $puas;
	}
	?>
	$(function () {
		var data = [
		    { label: "Tidak Puas : ",  data: <?php echo $tidak_puas; ?>, color: "#88bbc8"},
		    { label: "Kurang Puas : ", data: <?php echo $kurang_puas; ?>, color: "#ed7a53"},
		    { label: "Puas : ", data: <?php echo $puas; ?>, color: "#9FC569"},
		    { label: "Sangat Puas : ", data: <?php echo $sangat_puas; ?>, color: "#bbdce3"}
		];

	    $.plot($(".simple-pie-6-1"), data,
		{
			series: {
				pie: {
					show: true,
					highlight: {
						opacity: 0.1
					},
					radius: 1,
					stroke: {
						color: '#fff',
						width: 2
					},
					startAngle: 2,
				    combine: {
	                    color: '#353535',
	                    threshold: 0.05
	                },
	                label: {
	                    show: true,
	                    radius: 1,
	                    formatter: function(label, series){
	                        return '<div class="pie-chart-label">'+label+'&nbsp;'+Math.round(series.percent * 100) / 100 +'%</div>';
	                    }
	                }
				},
				grow: {	active: false}
			},
			legend:{show:false},
			grid: {
	            hoverable: true,
	            clickable: true
	        },
	        tooltip: true, //activate tooltip
			tooltipOpts: {
				content: "%s %y.2"+"%",
				shifts: {
					x: -30,
					y: -50
				}
			}
		});
	});
	}//end if


	if (divElement.hasClass('simple-pie-6-2')) {
	<?php
	$p = 0;
	$l = 0;
	$a = 0;
	foreach($query_5_1 as $row){
		if($row["jenis_kelamin"] == 'L'){
			$l++;
		} else {
			$p++;
		}
		$a++;
	}
	if($a > 0){
		$p	= $p / $a * 100;
		$l	= 100 - $p;
	}
	?>
	$(function () {
		var data = [
		    { label: "Perempuan : ",  data: <?php echo $p; ?>, color: "#88bbc8"},
		    { label: "Laki - Laki : ",  data: <?php echo $l; ?>, color: "#ed7a53"}
		];

	    $.plot($(".simple-pie-6-2"), data,
		{
			series: {
				pie: {
					show: true,
					highlight: {
						opacity: 0.1
					},
					radius: 1,
					stroke: {
						color: '#fff',
						width: 2
					},
					startAngle: 2,
				    combine: {
	                    color: '#353535',
	                    threshold: 0.05
	                },
	                label: {
	                    show: true,
	                    radius: 1,
	                    formatter: function(label, series){
	                        return '<div class="pie-chart-label">'+label+'&nbsp;'+Math.round(series.percent * 100) / 100 +'%</div>';
	                    }
	                }
				},
				grow: {	active: false}
			},
			legend:{show:false},
			grid: {
	            hoverable: true,
	            clickable: true
	        },
	        tooltip: true, //activate tooltip
			tooltipOpts: {
				content: "%s %y.2"+"%",
				shifts: {
					x: -30,
					y: -50
				}
			}
		});
	});
	}//end if
	if (divElement.hasClass('simple-pie-6-3')) {
	$(function () {
		var data = [
			<?php
			$a = 0;
			foreach($query_5_3 as $row){
			$a++;
			?>
			{ label: "<?php echo $row["range_usia"]; ?> : ",  data: <?php echo ($row["USIA"] / count($query_5_1) * 100); ?>, color: chartColours[<?php echo $a; ?>]},
			<?php
			}
			?>
		];

	    $.plot($(".simple-pie-6-3"), data,
		{
			series: {
				pie: {
					show: true,
					highlight: {
						opacity: 0.1
					},
					radius: 1,
					stroke: {
						color: '#fff',
						width: 2
					},
					startAngle: 2,
				    combine: {
	                    color: '#353535',
	                    threshold: 0.05
	                },
	                label: {
	                    show: true,
	                    radius: 1,
	                    formatter: function(label, series){
	                        return '<div class="pie-chart-label">'+label+'&nbsp;'+Math.round(series.percent * 100) / 100 +'%</div>';
	                    }
	                }
				},
				grow: {	active: false}
			},
			legend:{show:false},
			grid: {
	            hoverable: true,
	            clickable: true
	        },
	        tooltip: true, //activate tooltip
			tooltipOpts: {
				content: "%s %y.2"+"%",
				shifts: {
					x: -30,
					y: -50
				}
			}
		});
	});
	}//end if
	if (divElement.hasClass('simple-pie-6-4')) {
	$(function () {
		var data = [
			<?php
			$a = 0;
			foreach($query_5_4 as $row){
			$a++;
			?>
			{ label: "<?php echo $row["nm_pekerjaan"]; ?> : ",  data: <?php echo ($row["PEKERJAAN"] / count($query_5_1) * 100); ?>, color: chartColours[<?php echo $a; ?>]},
			<?php
			}
			?>
		];

	    $.plot($(".simple-pie-6-4"), data,
		{
			series: {
				pie: {
					show: true,
					highlight: {
						opacity: 0.1
					},
					radius: 1,
					stroke: {
						color: '#fff',
						width: 2
					},
					startAngle: 2,
				    combine: {
	                    color: '#353535',
	                    threshold: 0.05
	                },
	                label: {
	                    show: true,
	                    radius: 1,
	                    formatter: function(label, series){
	                        return '<div class="pie-chart-label">'+label+'&nbsp;'+Math.round(series.percent * 100) / 100 +'%</div>';
	                    }
	                }
				},
				grow: {	active: false}
			},
			legend:{show:false},
			grid: {
	            hoverable: true,
	            clickable: true
	        },
	        tooltip: true, //activate tooltip
			tooltipOpts: {
				content: "%s %y.2"+"%",
				shifts: {
					x: -30,
					y: -50
				}
			}
		});
	});
	}//end if
	if (divElement.hasClass('simple-pie-6-5')) {
	$(function () {
		var data = [
			<?php
			$a = 0;
			foreach($query_5_5 as $row){
			$a++;
			?>
			{ label: "<?php echo $row["nm_pendidikan"]; ?> : ",  data: <?php echo ($row["PENDIDIKAN"] / count($query_5_1) * 100); ?>, color: chartColours[<?php echo $a; ?>]},
			<?php
			}
			?>
		];

	    $.plot($(".simple-pie-6-5"), data,
		{
			series: {
				pie: {
					show: true,
					highlight: {
						opacity: 0.1
					},
					radius: 1,
					stroke: {
						color: '#fff',
						width: 2
					},
					startAngle: 2,
				    combine: {
	                    color: '#353535',
	                    threshold: 0.05
	                },
	                label: {
	                    show: true,
	                    radius: 1,
	                    formatter: function(label, series){
	                        return '<div class="pie-chart-label">'+label+'&nbsp;'+Math.round(series.percent * 100) / 100 +'%</div>';
	                    }
	                }
				},
				grow: {	active: false}
			},
			legend:{show:false},
			grid: {
	            hoverable: true,
	            clickable: true
	        },
	        tooltip: true, //activate tooltip
			tooltipOpts: {
				content: "%s %y.2"+"%",
				shifts: {
					x: -30,
					y: -50
				}
			}
		});
	});
	}//end if
	if (divElement.hasClass('simple-pie-6-6')) {
	$(function () {
		var data = [
			<?php
			$a = 0;
			foreach($query_5_6 as $row){
			$a++;
			?>
			{ label: "<?php echo $row["urus_izin"]; ?> kali : ",  data: <?php echo ($row["IZIN"] / count($query_5_1) * 100); ?>, color: chartColours[<?php echo $a; ?>]},
			<?php
			}
			?>
		];

	    $.plot($(".simple-pie-6-6"), data,
		{
			series: {
				pie: {
					show: true,
					highlight: {
						opacity: 0.1
					},
					radius: 1,
					stroke: {
						color: '#fff',
						width: 2
					},
					startAngle: 2,
				    combine: {
	                    color: '#353535',
	                    threshold: 0.05
	                },
	                label: {
	                    show: true,
	                    radius: 1,
	                    formatter: function(label, series){
	                        return '<div class="pie-chart-label">'+label+'&nbsp;'+Math.round(series.percent * 100) / 100 +'%</div>';
	                    }
	                }
				},
				grow: {	active: false}
			},
			legend:{show:false},
			grid: {
	            hoverable: true,
	            clickable: true
	        },
	        tooltip: true, //activate tooltip
			tooltipOpts: {
				content: "%s %y.2"+"%",
				shifts: {
					x: -30,
					y: -50
				}
			}
		});
	});
	}//end if


	var chartColours = ['#88bbc8', '#ed7a53', '#9FC569', '#bbdce3', '#9a3b1b', '#5a8022', '#2c7282'];
	if (divElement.hasClass('order-bars-chart-1')) {
	$(function () {
		//some data
		var d1 = [];
		<?php
		foreach($query_5_2 as $row){
		?>
		d1.push([<?php echo $row["URUTAN"]; ?>, <?php echo $row["HASIL"]; ?>]);
		<?php
		}
		?>

	    var ds = new Array();

	     ds.push({
	     	label: "Skor",
	        data:d1,
	        bars: {order: 1}
	    });

		var options = {
				bars: {
					show:true,
					barWidth: 0.1,
					fill:5
				},
				grid: {
					show: true,
				    aboveData: false,
				    color: "#3f3f3f" ,
				    labelMargin: 5,
				    axisMargin: 0,
				    borderWidth: 0,
				    borderColor:null,
				    minBorderMargin: 5 ,
				    clickable: true,
				    hoverable: true,
				    autoHighlight: false,
				    mouseActiveRadius: 20
				},
		        series: {
		        	grow: {active:false}
		        },
		        legend: { position: "ne" },
		        colors: chartColours,
		        tooltip: true, //activate tooltip
				tooltipOpts: {
					content: "%s : %y.2",
					shifts: {
						x: -30,
						y: -50
					}
				}
		};

		$.plot($(".order-bars-chart-6"), ds, options);
	});
	}//end if
});
</script>

<script language="javascript">
$(document).ready(function() {
	var divElement = $('div'); //log all div elements

	if (divElement.hasClass('simple-pie-7-1')) {
	<?php
	$sangat_puas = 0;
	$puas = 0;
	$kurang_puas = 0;
	$tidak_puas = 0;
	$a = 0;
	foreach($query_6_1 as $row){
		// 1 - 1,75 : tidak puas
		// 1,76 - 2,5 : kurang puas
		// 2,51 - 3,25 : puas
		// 3,26 - 4 : sangat puas
		if( $row["HASIL"] >= 1 && $row["HASIL"] <= 1.75 ){
			$tidak_puas++;
		} elseif( $row["HASIL"] >= 1.76 && $row["HASIL"] <= 2.5 ) {
			$kurang_puas++;
		} elseif( $row["HASIL"] >= 2.51 && $row["HASIL"] <= 3.25 ) {
			$puas++;
		} else {
			$sangat_puas++;
		}
		// dump( $row["HASIL"] );
		$a++;
	}
	if($a > 0){
		$tidak_puas = $tidak_puas / $a * 100;
		$kurang_puas = $kurang_puas / $a * 100;
		$puas = $puas / $a * 100;
		$sangat_puas = 100 - $tidak_puas - $kurang_puas - $puas;
	}
	?>
	$(function () {
		var data = [
		    { label: "Tidak Puas : ",  data: <?php echo $tidak_puas; ?>, color: "#88bbc8"},
		    { label: "Kurang Puas : ", data: <?php echo $kurang_puas; ?>, color: "#ed7a53"},
		    { label: "Puas : ", data: <?php echo $puas; ?>, color: "#9FC569"},
		    { label: "Sangat Puas : ", data: <?php echo $sangat_puas; ?>, color: "#bbdce3"}
		];

	    $.plot($(".simple-pie-7-1"), data,
		{
			series: {
				pie: {
					show: true,
					highlight: {
						opacity: 0.1
					},
					radius: 1,
					stroke: {
						color: '#fff',
						width: 2
					},
					startAngle: 2,
				    combine: {
	                    color: '#353535',
	                    threshold: 0.05
	                },
	                label: {
	                    show: true,
	                    radius: 1,
	                    formatter: function(label, series){
	                        return '<div class="pie-chart-label">'+label+'&nbsp;'+Math.round(series.percent * 100) / 100 +'%</div>';
	                    }
	                }
				},
				grow: {	active: false}
			},
			legend:{show:false},
			grid: {
	            hoverable: true,
	            clickable: true
	        },
	        tooltip: true, //activate tooltip
			tooltipOpts: {
				content: "%s %y.2"+"%",
				shifts: {
					x: -30,
					y: -50
				}
			}
		});
	});
	}//end if


	if (divElement.hasClass('simple-pie-7-2')) {
	<?php
	$p = 0;
	$l = 0;
	$a = 0;
	foreach($query_6_1 as $row){
		if($row["jenis_kelamin"] == 'L'){
			$l++;
		} else {
			$p++;
		}
		$a++;
	}
	if($a > 0){
		$p	= $p / $a * 100;
		$l	= 100 - $p;
	}
	?>
	$(function () {
		var data = [
		    { label: "Perempuan : ",  data: <?php echo $p; ?>, color: "#88bbc8"},
		    { label: "Laki - Laki : ",  data: <?php echo $l; ?>, color: "#ed7a53"}
		];

	    $.plot($(".simple-pie-7-2"), data,
		{
			series: {
				pie: {
					show: true,
					highlight: {
						opacity: 0.1
					},
					radius: 1,
					stroke: {
						color: '#fff',
						width: 2
					},
					startAngle: 2,
				    combine: {
	                    color: '#353535',
	                    threshold: 0.05
	                },
	                label: {
	                    show: true,
	                    radius: 1,
	                    formatter: function(label, series){
	                        return '<div class="pie-chart-label">'+label+'&nbsp;'+Math.round(series.percent * 100) / 100 +'%</div>';
	                    }
	                }
				},
				grow: {	active: false}
			},
			legend:{show:false},
			grid: {
	            hoverable: true,
	            clickable: true
	        },
	        tooltip: true, //activate tooltip
			tooltipOpts: {
				content: "%s %y.2"+"%",
				shifts: {
					x: -30,
					y: -50
				}
			}
		});
	});
	}//end if
	if (divElement.hasClass('simple-pie-7-3')) {
	$(function () {
		var data = [
			<?php
			$a = 0;
			foreach($query_6_3 as $row){
			$a++;
			?>
			{ label: "<?php echo $row["range_usia"]; ?> : ",  data: <?php echo ($row["USIA"] / count($query_6_1) * 100); ?>, color: chartColours[<?php echo $a; ?>]},
			<?php
			}
			?>
		];

	    $.plot($(".simple-pie-7-3"), data,
		{
			series: {
				pie: {
					show: true,
					highlight: {
						opacity: 0.1
					},
					radius: 1,
					stroke: {
						color: '#fff',
						width: 2
					},
					startAngle: 2,
				    combine: {
	                    color: '#353535',
	                    threshold: 0.05
	                },
	                label: {
	                    show: true,
	                    radius: 1,
	                    formatter: function(label, series){
	                        return '<div class="pie-chart-label">'+label+'&nbsp;'+Math.round(series.percent * 100) / 100 +'%</div>';
	                    }
	                }
				},
				grow: {	active: false}
			},
			legend:{show:false},
			grid: {
	            hoverable: true,
	            clickable: true
	        },
	        tooltip: true, //activate tooltip
			tooltipOpts: {
				content: "%s %y.2"+"%",
				shifts: {
					x: -30,
					y: -50
				}
			}
		});
	});
	}//end if
	if (divElement.hasClass('simple-pie-7-4')) {
	$(function () {
		var data = [
			<?php
			$a = 0;
			foreach($query_6_4 as $row){
			$a++;
			?>
			{ label: "<?php echo $row["nm_pekerjaan"]; ?> : ",  data: <?php echo ($row["PEKERJAAN"] / count($query_6_1) * 100); ?>, color: chartColours[<?php echo $a; ?>]},
			<?php
			}
			?>
		];

	    $.plot($(".simple-pie-7-4"), data,
		{
			series: {
				pie: {
					show: true,
					highlight: {
						opacity: 0.1
					},
					radius: 1,
					stroke: {
						color: '#fff',
						width: 2
					},
					startAngle: 2,
				    combine: {
	                    color: '#353535',
	                    threshold: 0.05
	                },
	                label: {
	                    show: true,
	                    radius: 1,
	                    formatter: function(label, series){
	                        return '<div class="pie-chart-label">'+label+'&nbsp;'+Math.round(series.percent * 100) / 100 +'%</div>';
	                    }
	                }
				},
				grow: {	active: false}
			},
			legend:{show:false},
			grid: {
	            hoverable: true,
	            clickable: true
	        },
	        tooltip: true, //activate tooltip
			tooltipOpts: {
				content: "%s %y.2"+"%",
				shifts: {
					x: -30,
					y: -50
				}
			}
		});
	});
	}//end if
	if (divElement.hasClass('simple-pie-7-5')) {
	$(function () {
		var data = [
			<?php
			$a = 0;
			foreach($query_6_5 as $row){
			$a++;
			?>
			{ label: "<?php echo $row["nm_pendidikan"]; ?> : ",  data: <?php echo ($row["PENDIDIKAN"] / count($query_6_1) * 100); ?>, color: chartColours[<?php echo $a; ?>]},
			<?php
			}
			?>
		];

	    $.plot($(".simple-pie-7-5"), data,
		{
			series: {
				pie: {
					show: true,
					highlight: {
						opacity: 0.1
					},
					radius: 1,
					stroke: {
						color: '#fff',
						width: 2
					},
					startAngle: 2,
				    combine: {
	                    color: '#353535',
	                    threshold: 0.05
	                },
	                label: {
	                    show: true,
	                    radius: 1,
	                    formatter: function(label, series){
	                        return '<div class="pie-chart-label">'+label+'&nbsp;'+Math.round(series.percent * 100) / 100 +'%</div>';
	                    }
	                }
				},
				grow: {	active: false}
			},
			legend:{show:false},
			grid: {
	            hoverable: true,
	            clickable: true
	        },
	        tooltip: true, //activate tooltip
			tooltipOpts: {
				content: "%s %y.2"+"%",
				shifts: {
					x: -30,
					y: -50
				}
			}
		});
	});
	}//end if
	if (divElement.hasClass('simple-pie-7-6')) {
	$(function () {
		var data = [
			<?php
			$a = 0;
			foreach($query_6_6 as $row){
			$a++;
			?>
			{ label: "<?php echo $row["urus_izin"]; ?> kali : ",  data: <?php echo ($row["IZIN"] / count($query_6_1) * 100); ?>, color: chartColours[<?php echo $a; ?>]},
			<?php
			}
			?>
		];

	    $.plot($(".simple-pie-7-6"), data,
		{
			series: {
				pie: {
					show: true,
					highlight: {
						opacity: 0.1
					},
					radius: 1,
					stroke: {
						color: '#fff',
						width: 2
					},
					startAngle: 2,
				    combine: {
	                    color: '#353535',
	                    threshold: 0.05
	                },
	                label: {
	                    show: true,
	                    radius: 1,
	                    formatter: function(label, series){
	                        return '<div class="pie-chart-label">'+label+'&nbsp;'+Math.round(series.percent * 100) / 100 +'%</div>';
	                    }
	                }
				},
				grow: {	active: false}
			},
			legend:{show:false},
			grid: {
	            hoverable: true,
	            clickable: true
	        },
	        tooltip: true, //activate tooltip
			tooltipOpts: {
				content: "%s %y.2"+"%",
				shifts: {
					x: -30,
					y: -50
				}
			}
		});
	});
	}//end if


	var chartColours = ['#88bbc8', '#ed7a53', '#9FC569', '#bbdce3', '#9a3b1b', '#5a8022', '#2c7282'];
	if (divElement.hasClass('order-bars-chart-1')) {
	$(function () {
		//some data
		var d1 = [];
		<?php
		foreach($query_6_2 as $row){
		?>
		d1.push([<?php echo $row["URUTAN"]; ?>, <?php echo $row["HASIL"]; ?>]);
		<?php
		}
		?>

	    var ds = new Array();

	     ds.push({
	     	label: "Skor",
	        data:d1,
	        bars: {order: 1}
	    });

		var options = {
				bars: {
					show:true,
					barWidth: 0.1,
					fill:5
				},
				grid: {
					show: true,
				    aboveData: false,
				    color: "#3f3f3f" ,
				    labelMargin: 5,
				    axisMargin: 0,
				    borderWidth: 0,
				    borderColor:null,
				    minBorderMargin: 5 ,
				    clickable: true,
				    hoverable: true,
				    autoHighlight: false,
				    mouseActiveRadius: 20
				},
		        series: {
		        	grow: {active:false}
		        },
		        legend: { position: "ne" },
		        colors: chartColours,
		        tooltip: true, //activate tooltip
				tooltipOpts: {
					content: "%s : %y.2",
					shifts: {
						x: -30,
						y: -50
					}
				}
		};

		$.plot($(".order-bars-chart-7"), ds, options);
	});
	}//end if
});
</script>

<script language="javascript">
$(document).ready(function() {
	var divElement = $('div'); //log all div elements

	if (divElement.hasClass('simple-pie-8-1')) {
	<?php
	$sangat_puas = 0;
	$puas = 0;
	$kurang_puas = 0;
	$tidak_puas = 0;
	$a = 0;
	foreach($query_7_1 as $row){
		// 1 - 1,75 : tidak puas
		// 1,76 - 2,5 : kurang puas
		// 2,51 - 3,25 : puas
		// 3,26 - 4 : sangat puas
		if( $row["HASIL"] >= 1 && $row["HASIL"] <= 1.75 ){
			$tidak_puas++;
		} elseif( $row["HASIL"] >= 1.76 && $row["HASIL"] <= 2.5 ) {
			$kurang_puas++;
		} elseif( $row["HASIL"] >= 2.51 && $row["HASIL"] <= 3.25 ) {
			$puas++;
		} else {
			$sangat_puas++;
		}
		// dump( $row["HASIL"] );
		$a++;
	}
	if($a > 0){
		$tidak_puas = $tidak_puas / $a * 100;
		$kurang_puas = $kurang_puas / $a * 100;
		$puas = $puas / $a * 100;
		$sangat_puas = 100 - $tidak_puas - $kurang_puas - $puas;
	}
	?>
	$(function () {
		var data = [
		    { label: "Tidak Puas : ",  data: <?php echo $tidak_puas; ?>, color: "#88bbc8"},
		    { label: "Kurang Puas : ", data: <?php echo $kurang_puas; ?>, color: "#ed7a53"},
		    { label: "Puas : ", data: <?php echo $puas; ?>, color: "#9FC569"},
		    { label: "Sangat Puas : ", data: <?php echo $sangat_puas; ?>, color: "#bbdce3"}
		];

	    $.plot($(".simple-pie-8-1"), data,
		{
			series: {
				pie: {
					show: true,
					highlight: {
						opacity: 0.1
					},
					radius: 1,
					stroke: {
						color: '#fff',
						width: 2
					},
					startAngle: 2,
				    combine: {
	                    color: '#353535',
	                    threshold: 0.05
	                },
	                label: {
	                    show: true,
	                    radius: 1,
	                    formatter: function(label, series){
	                        return '<div class="pie-chart-label">'+label+'&nbsp;'+Math.round(series.percent * 100) / 100 +'%</div>';
	                    }
	                }
				},
				grow: {	active: false}
			},
			legend:{show:false},
			grid: {
	            hoverable: true,
	            clickable: true
	        },
	        tooltip: true, //activate tooltip
			tooltipOpts: {
				content: "%s %y.2"+"%",
				shifts: {
					x: -30,
					y: -50
				}
			}
		});
	});
	}//end if


	if (divElement.hasClass('simple-pie-8-2')) {
	<?php
	$p = 0;
	$l = 0;
	$a = 0;
	foreach($query_7_1 as $row){
		if($row["jenis_kelamin"] == 'L'){
			$l++;
		} else {
			$p++;
		}
		$a++;
	}
	if($a > 0){
		$p	= $p / $a * 100;
		$l	= 100 - $p;
	}
	?>
	$(function () {
		var data = [
		    { label: "Perempuan : ",  data: <?php echo $p; ?>, color: "#88bbc8"},
		    { label: "Laki - Laki : ",  data: <?php echo $l; ?>, color: "#ed7a53"}
		];

	    $.plot($(".simple-pie-8-2"), data,
		{
			series: {
				pie: {
					show: true,
					highlight: {
						opacity: 0.1
					},
					radius: 1,
					stroke: {
						color: '#fff',
						width: 2
					},
					startAngle: 2,
				    combine: {
	                    color: '#353535',
	                    threshold: 0.05
	                },
	                label: {
	                    show: true,
	                    radius: 1,
	                    formatter: function(label, series){
	                        return '<div class="pie-chart-label">'+label+'&nbsp;'+Math.round(series.percent * 100) / 100 +'%</div>';
	                    }
	                }
				},
				grow: {	active: false}
			},
			legend:{show:false},
			grid: {
	            hoverable: true,
	            clickable: true
	        },
	        tooltip: true, //activate tooltip
			tooltipOpts: {
				content: "%s %y.2"+"%",
				shifts: {
					x: -30,
					y: -50
				}
			}
		});
	});
	}//end if
	if (divElement.hasClass('simple-pie-8-3')) {
	$(function () {
		var data = [
			<?php
			$a = 0;
			foreach($query_7_3 as $row){
			$a++;
			?>
			{ label: "<?php echo $row["range_usia"]; ?> : ",  data: <?php echo ($row["USIA"] / count($query_7_1) * 100); ?>, color: chartColours[<?php echo $a; ?>]},
			<?php
			}
			?>
		];

	    $.plot($(".simple-pie-8-3"), data,
		{
			series: {
				pie: {
					show: true,
					highlight: {
						opacity: 0.1
					},
					radius: 1,
					stroke: {
						color: '#fff',
						width: 2
					},
					startAngle: 2,
				    combine: {
	                    color: '#353535',
	                    threshold: 0.05
	                },
	                label: {
	                    show: true,
	                    radius: 1,
	                    formatter: function(label, series){
	                        return '<div class="pie-chart-label">'+label+'&nbsp;'+Math.round(series.percent * 100) / 100 +'%</div>';
	                    }
	                }
				},
				grow: {	active: false}
			},
			legend:{show:false},
			grid: {
	            hoverable: true,
	            clickable: true
	        },
	        tooltip: true, //activate tooltip
			tooltipOpts: {
				content: "%s %y.2"+"%",
				shifts: {
					x: -30,
					y: -50
				}
			}
		});
	});
	}//end if
	if (divElement.hasClass('simple-pie-8-4')) {
	$(function () {
		var data = [
			<?php
			$a = 0;
			foreach($query_7_4 as $row){
			$a++;
			?>
			{ label: "<?php echo $row["nm_pekerjaan"]; ?> : ",  data: <?php echo ($row["PEKERJAAN"] / count($query_7_1) * 100); ?>, color: chartColours[<?php echo $a; ?>]},
			<?php
			}
			?>
		];

	    $.plot($(".simple-pie-8-4"), data,
		{
			series: {
				pie: {
					show: true,
					highlight: {
						opacity: 0.1
					},
					radius: 1,
					stroke: {
						color: '#fff',
						width: 2
					},
					startAngle: 2,
				    combine: {
	                    color: '#353535',
	                    threshold: 0.05
	                },
	                label: {
	                    show: true,
	                    radius: 1,
	                    formatter: function(label, series){
	                        return '<div class="pie-chart-label">'+label+'&nbsp;'+Math.round(series.percent * 100) / 100 +'%</div>';
	                    }
	                }
				},
				grow: {	active: false}
			},
			legend:{show:false},
			grid: {
	            hoverable: true,
	            clickable: true
	        },
	        tooltip: true, //activate tooltip
			tooltipOpts: {
				content: "%s %y.2"+"%",
				shifts: {
					x: -30,
					y: -50
				}
			}
		});
	});
	}//end if
	if (divElement.hasClass('simple-pie-8-5')) {
	$(function () {
		var data = [
			<?php
			$a = 0;
			foreach($query_7_5 as $row){
			$a++;
			?>
			{ label: "<?php echo $row["nm_pendidikan"]; ?> : ",  data: <?php echo ($row["PENDIDIKAN"] / count($query_7_1) * 100); ?>, color: chartColours[<?php echo $a; ?>]},
			<?php
			}
			?>
		];

	    $.plot($(".simple-pie-8-5"), data,
		{
			series: {
				pie: {
					show: true,
					highlight: {
						opacity: 0.1
					},
					radius: 1,
					stroke: {
						color: '#fff',
						width: 2
					},
					startAngle: 2,
				    combine: {
	                    color: '#353535',
	                    threshold: 0.05
	                },
	                label: {
	                    show: true,
	                    radius: 1,
	                    formatter: function(label, series){
	                        return '<div class="pie-chart-label">'+label+'&nbsp;'+Math.round(series.percent * 100) / 100 +'%</div>';
	                    }
	                }
				},
				grow: {	active: false}
			},
			legend:{show:false},
			grid: {
	            hoverable: true,
	            clickable: true
	        },
	        tooltip: true, //activate tooltip
			tooltipOpts: {
				content: "%s %y.2"+"%",
				shifts: {
					x: -30,
					y: -50
				}
			}
		});
	});
	}//end if
	if (divElement.hasClass('simple-pie-8-6')) {
	$(function () {
		var data = [
			<?php
			$a = 0;
			foreach($query_7_6 as $row){
			$a++;
			?>
			{ label: "<?php echo $row["urus_izin"]; ?> kali : ",  data: <?php echo ($row["IZIN"] / count($query_7_1) * 100); ?>, color: chartColours[<?php echo $a; ?>]},
			<?php
			}
			?>
		];

	    $.plot($(".simple-pie-8-6"), data,
		{
			series: {
				pie: {
					show: true,
					highlight: {
						opacity: 0.1
					},
					radius: 1,
					stroke: {
						color: '#fff',
						width: 2
					},
					startAngle: 2,
				    combine: {
	                    color: '#353535',
	                    threshold: 0.05
	                },
	                label: {
	                    show: true,
	                    radius: 1,
	                    formatter: function(label, series){
	                        return '<div class="pie-chart-label">'+label+'&nbsp;'+Math.round(series.percent * 100) / 100 +'%</div>';
	                    }
	                }
				},
				grow: {	active: false}
			},
			legend:{show:false},
			grid: {
	            hoverable: true,
	            clickable: true
	        },
	        tooltip: true, //activate tooltip
			tooltipOpts: {
				content: "%s %y.2"+"%",
				shifts: {
					x: -30,
					y: -50
				}
			}
		});
	});
	}//end if


	var chartColours = ['#88bbc8', '#ed7a53', '#9FC569', '#bbdce3', '#9a3b1b', '#5a8022', '#2c7282'];
	if (divElement.hasClass('order-bars-chart-1')) {
	$(function () {
		//some data
		var d1 = [];
		<?php
		foreach($query_7_2 as $row){
		?>
		d1.push([<?php echo $row["URUTAN"]; ?>, <?php echo $row["HASIL"]; ?>]);
		<?php
		}
		?>

	    var ds = new Array();

	     ds.push({
	     	label: "Skor",
	        data:d1,
	        bars: {order: 1}
	    });

		var options = {
				bars: {
					show:true,
					barWidth: 0.1,
					fill:5
				},
				grid: {
					show: true,
				    aboveData: false,
				    color: "#3f3f3f" ,
				    labelMargin: 5,
				    axisMargin: 0,
				    borderWidth: 0,
				    borderColor:null,
				    minBorderMargin: 5 ,
				    clickable: true,
				    hoverable: true,
				    autoHighlight: false,
				    mouseActiveRadius: 20
				},
		        series: {
		        	grow: {active:false}
		        },
		        legend: { position: "ne" },
		        colors: chartColours,
		        tooltip: true, //activate tooltip
				tooltipOpts: {
					content: "%s : %y.2",
					shifts: {
						x: -30,
						y: -50
					}
				}
		};

		$.plot($(".order-bars-chart-8"), ds, options);
	});
	}//end if
});
</script>